选择选项中的 Angular 4 更新列表

Question

<select [(ngModel)]="yearSelected" id="year" (click)="filterYear()">
    <option value="" disabled selected>Year</option>
    <option *ngFor="let y of yearsUnique" [value]="y">{{y}}</option>
</select>
<select [(ngModel)]="facultySelected" id="faculty" (click)="filterFaculty()"> 
    <option value="" disabled selected>Faculty</option>
    <option *ngFor="let f of facultiesUnique" [value]="f">{{f}}</option>
</select>

用户选择年份后，在我的 TypeScript 类中，我更新了包含同一年院系的 facultiesUnique 列表(在初始加载时它加载了所有院系):

filterYear() {
    setTimeout(() => {        
        console.log("this.yearSelected " + this.yearSelected);        
        this.filterList = this.courseList.filter((course: CourseModel) =>
            (course.Year.toString().indexOf(this.yearSelected.toString()) !== -1));
        this.facultiesUnique = this.courseList.filter((course: CourseModel) =>
            (course.Year.toString().indexOf(this.yearSelected.toString()) !== -1));
        this.facultiesUnique = this.courseList.map(data => data.Faculty);      
    }, 500);
}

但是，它不会用相关列表更新下拉列表。 有任何想法吗？ 谢谢

Answer 1

您可以使用 (change)="filterYear($event.target.value)" 代替 (click)="filterYear()"。

我已经在 Stackblitz 上创建了一个演示

component.html

<select [(ngModel)]="yearSelected" (change)="filterYear($event.target.value)">
    <option value="" disabled selected>Year</option>
    <option *ngFor="let y of yearsUnique" [value]="y">{{y}}</option>
</select>
<select [(ngModel)]="facultySelected"  (change)="filterFaculty($event.target.value)">
    <option value="" disabled selected>Faculty</option>
    <option *ngFor="let f of facultiesUnique" [value]="f.name">{{f.name}}</option>
</select>

component.ts

get facultiesUnique() {
    return this.dummyData.filter(items => {
      return items.year == this.yearSelected
    })
}