After the component loads, I expect both mainTask and mainJob to be displayed as selections in the dropdown. However, only mainTask is updated while mainJob remains unchanged in the UI. Interestingly, when I manually choose a value from the taskList dropdown, mainJob updates accordingly. It seems that the issue lies in mainJob not being updated because the jobList dropdown is triggered by the selection of mainTask. How can I fix this code?
HTML file
<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 file
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);
}
}