如何用Angular编写示例代码实现下拉列表组件？

本文共计1076个文字，预计阅读时间需要5分钟。

需求：+ 方案一 + 最开始就是用最简单的方法，前端请求数据，然后通过select和option在页面上显示，但写了一会发现出现了许多类似的重复的代码：// 初始化年级选项 initGradeO

需求：

方案一

最开始就是用最简单的方法，前台请求数据，然后通过select和option在页面上显示，但是写了一会儿发现出现了许多类似下面的重复的代码：

// 初始化年级选项 initGradeOptions() { this.gradeService.getAll().subscribe((res) => { this.gradeOptions = res; }, () => { console.log('get gradeOption error'); }); } <nz-select nzPlaceHolder="请选择所属年级" formControlName="grade"> <nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name" [nzValue]="grade"></nz-option> </nz-select>

每写一个列表都要写请求它的数据的方法和模板中的内容，非常繁琐。

方案二

因为在项目中，不止一个地方用到了这样的列表，所以就想着把这些列表单独拿出来，写成组件。