ExpressionChangedAfterIsHasBeenCheckedError 因为在 angular 2 中更新了我的下拉列表

Question

正如标题所说，我得到了一个 ExpressionChangedAfterIsHasBeenCheckedError 并且在阅读 this article 之后，据我所知，这是一个警告，以防止不一致。正是那些话。所以在某些时候我可能违反了单向流（我假设）。我有：

一个下拉框。

<select id="product" [(ngModel)]="model.searchParameters.productId">
 <option *ngFor="let product of products [value]="product.id">{{product.name}}</option>
</select>

触发checkIban的输入框。

<div *ngIf="checkIban(productnumber, searchForm)">
   //show validation errors
</div>



checkIban(field: any, form: any): Boolean {
    if(field.dirty)
    {
        if(field.viewModel.length === Productnumber.Iban )
        {
           this.model.searchParameters.productId = Product.Ibannumber;
        }
    }
}

我认为我理解 ExpressionChangedAfterIsHasBeenCheckedError 的概念，不幸的是，对我来说，还不足以真正应用适当的解决方案来解决这个问题。

使用 setTimeout 不是一个选项（我试过），因为它会产生不可预测的状态（如文章中所写）。那么有人可以给我一些关于我做错了什么的指示吗？

Answer 1

绑定到视图中的函数在 Angular 中通常不是一个好主意，因为每次更改检测运行时都会调用该函数。当 2 个后续调用（在单个更改检测期间运行）return 2 个不同的结果时，您会在问题中收到错误消息。

改为使用事件更新结果并将其分配给组件中的字段，然后改为绑定到该字段：

<select id="product" [(ngModel)]="model.searchParameters.productId"
    (ngModelChange)="checkIban()">
 <option *ngFor="let product of products [value]="product.id">{{product.name}}</option>
</select>

<div *ngIf="isIbanOk">
   //show validation errors
</div>

checkIban(field: any, form: any): Boolean {
    ...

    this.isIbanOk = result; // true or false
}

Answer 2

我决定在我的解决方案中添加 ChangeDetectionStrategy。

我的组件现在看起来像这样。

@Component{{
selector: 'search',
templateUrl:'./app/search/search.component.html',
changeDetection:ChangeDetectionStrategy.OnPush, 
providers:[SearchService]
})

在大量阅读该主题后，我发现了这个解决方案。这似乎已经成功了。

ExpressionChangedAfterIsHasBeenCheckedError 因为在 angular 2 中更新了我的下拉列表

ExpressionChangedAfterIsHasBeenCheckedError because of updating my dropdownlist in angular 2

angular2-services

angular