なぜエラーが発生するのかわかりません。マップは変更されていません。
式はチェック後に変更されました。以前の値: '[object Map Iterator]'。現在の値: '[object Map Iterator]'
<tr *ngFor="let author of bindedAuthors.keys()">
<td> {{author}}</td>
<td>
<button (click)="onUpdate(author)"
class="btn gl-btn-primary">Update
</button>
</td>
<td>
<button (click)="onDelete(author)" class="btn gl-btn-default">Delete</button>
</td>
</tr>
結果は予想どおりで、すべてのデータが表示されますが、このエラーが毎回コンソールに表示されます。
ベストアンサー1
テンプレート内のメソッドにバインドしないでください...keys()。変更検出が実行されるたびに呼び出されます。object.keys()呼び出されるたびに新しいオブジェクトが返され、Angular はこれを予期しない変更として認識し、エラーが発生します。
次のように修正できます
someMethod() {
this.bindedAuthorsKeys = this.bindedAuthors.keys();
}
*ngFor="let author of bindedAuthorsKeys"
コメントからの更新:
this.bindedAuthorsKeys = Array.from(this.bindedAuthors.keys());
呼び出しごとに同じインスタンスを返すように見える.keys()ため、Angular は変更を認識しません。毎回新しい配列を作成することで、配列が完全に新しいオブジェクトになることが保証されるため、Angular は変更を認識し、ウィジェットをダーティとしてマークし、「背後で状態が変更された」というエラーを出力しません。