ExpressionChangedAfterIsHasBeenCheckedError wegen der Aktualisierung meiner Dropdown-Liste in eckigen 2

Question

Wie der Titel sagt, ich bin ein ExpressionChangedAfterIsHasBeenCheckedError bekommen und nach dem Lesen this article, von dem, was ich verstehe, ist es eine Vorsichtsmaßnahme, um Inkonsistenzen zu verhindern. Genau diese Worte. Irgendwann verletze ich wahrscheinlich den unidirektionalen Fluss (nehme ich an). Was ich habe:

Eine Dropdown-Box.

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

Ein Eingabefeld, das checkIban auslöst.

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

Ich möchte ich das Konzept der ExpressionChangedAfterIsHasBeenCheckedError verstehen denken, leider für mich nicht gut genug, um wirklich eine richtige Lösung für dieses Problem anwenden.

Verwenden setTimeout ist keine Option (ich habe es versucht), da es einen unvorhersehbaren Zustand erstellt (wie in dem Artikel geschrieben wurde). Kann mir jemand Hinweise geben, was ich falsch mache?

Answer 1

ich mich entschieden habe ChangeDetectionStrategy in meiner Lösung hinzufügen .

Meine Komponente sieht jetzt so aus.

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

Nach viel lesen zu diesem Thema stieß ich auf diese Lösung. Das scheint der Zweck gewesen zu sein.

Answer 2

Die Bindung an eine Funktion in der Ansicht ist normalerweise eine schlechte Idee in Angular, da die Funktion jedes Mal aufgerufen wird, wenn die Änderungserkennung ausgeführt wird. Wenn 2 aufeinanderfolgende Aufrufe (während einer einzigen Änderungserkennung) zwei verschiedene Ergebnisse zurückgeben, erhalten Sie die Fehlermeldung in Ihrer Frage.

Statt ein Ereignis das Ergebnis verwenden, zu aktualisieren und zu einem Feld in Ihrer Komponente zuweisen und dann auf dieses Feld bindet statt:

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