typescript - Angular 4 Uppdatera lista i Select-Option

<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>

Efter att användaren väljer ett år, uppdaterar jag i min TypeScript-klass facultiesUnique-listan med fakulteter från samma år (vid den initiala laddningen laddas alla fakulteter):

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);
}

Men det uppdaterar inte rullgardinsmenyn med den relevanta listan. Några idéer? Tack

Svar #1

Du kan använda (change)="filterYear($event.target.value)" istället för (click)="filterYear()".

Jag har skapat en demo på Stackblitz

komponent.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>

komponent.ts

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

Svar #2

Du kan använda

(ngModelChange)="filterFaculty()" 

eller

(change)="filterFaculty()"

I funktionen filterFaculty() kan du sedan hämta det valda värdet, det är lagrat i:

this.facultySelected