javascript - NgModel没有反射(reflect)从下拉列表中选择的值，该下拉列表的值基于另一个下拉列表进行填充

加载组件后，我希望mainTask和mainJob在下拉菜单中反映为选择，mainTask反映了预期的情况，但UI中的mainJob未更新。但是，如果我从taskList中手动选择UI中的值，则会相应地更新mainJob。看来mainJob没有得到反映，因为jobList下拉列表是由mainTask的选择触发的。我该如何更正我的代码？

html文件

<mat-form-field>
              <mat-select [(ngModel)]="mainTask">
                <mat-option *ngFor="let task of taskList"
                            [value]="task"
                            (click)="getJobs()">
                  {{task}}
                </mat-option>
              </mat-select>
            </mat-form-field>

    <mat-form-field>
              <mat-select [(ngModel)]="mainJob">
                <mat-option *ngFor="let job of jobList"
                            [value]="job">
                  {{job}}
                </mat-option>
              </mat-select>
            </mat-form-field>

ts文件

ngOnInit(): void {
    this.taskList = ['task1','task2','task3'];
    this.jobList = ['job1','job2','job3'];
    this.mainTask = 'task2';
    this.mainJob = 'job2';
}
getJobs():void {
    if(mainTask){
       const jobIndex = this.taskList.indexOf(this.mainTask);
       this.jobList.splice(0, jobIndex);
    }
}

最佳答案

是的，仅在调用getjobs（）函数时才选择mainJob，

您可以在类似这样的组件中为mainJob分配一个值

mainJob:string = 'job2';

而不是在ngOnIt中。检查此柱塞here