NgModel 没有反映下拉列表中的选定值，其值是根据另一个下拉列表填充的

Question

加载组件时，我希望 mainTask 和 mainJob 在下拉列表中反映为 selection，mainTask 按预期反映但 mainJob 未在 UI 中更新。但是，如果我手动 select 来自 taskList 的 UI 中的值，mainJob 会相应更新。看起来 mainJob 没有得到反映，因为 jobList 下拉列表是由 mainTask 的 selection 触发的。如何更正我的代码？

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

Answer 1

是的，只有在调用 getjobs() 函数时才会选择 mainJob，

您可以在

这样的组件中为 mainJob 赋值

mainJob:string = 'job2';

而且不在 ngOnIt 中。检查这个 plunker here

NgModel 没有反映下拉列表中的选定值，其值是根据另一个下拉列表填充的

NgModel isn't reflecting the selected value from a dropdown whose values get populated based on another dropdown

javascript

typescript

angular-ngmodel

angular