Question

我有2个选择，其中有2个对象数组以模态填充：

<select class="browser-default" id="gebied" 
  [(ngModel)]="filteredGebied" 
  (ngModelChange)="onChange($event)">
    <option *ngFor="let gebied of list1" 
      value="{{gebied.id}}">{{gebied.beschrijving}}</option>
</select>

<select class="browser-default" id="domein" [(ngModel)]="filteredDomein">
  <option *ngFor="let domein of list2"
    value="{{domein.id}}">{{domein.beschrijving}}</option>
</select>

现在，我想基于列表1中的选定项目更改第二个选择（列表2）中的项目。

onChange(list1Id){ 
...
this.list2 = ...
}

问题是我的第二个选择（列表2）中的选择选项没有改变。

有时会出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改经过检查后。上一个值：'ngForOf：

如何解决所有问题？

Answer 1

它应该确实有效。例如，在这里我检查是否选择了a，这意味着根据您的绑定filteredGebied为1，然后list2必须更改！

  export class AppComponent {
      list1 = [{ id: '1', beschrijving: 'a' }, { id: '2', beschrijving: 'b' }];
      list2 = [{ id: '1', beschrijving: 'aaa' }, { id: '2', beschrijving: 'bbbb' }];
      filteredGebied;
      filteredDomein;

      onChange(event) {
      if (this.filteredGebied === '1') {
        this.list2 = [{ id: '1', beschrijving: 'xxx' }, { id: '2', beschrijving: 'yyyy' }];
      }
     }
   }

Answer 2

如果我在启动时不填充第二个选择项，那么它显然可以工作。但这对我的应用程序来说不是问题。

角度：动态选择中的更改选项列表

2 个答案: