テキストエリアで[（ngModel）]バインディングを使用するとExpressionChangedAfterItHasBeenCheckedErrorを回避する方法

Question

オブジェクトの詳細を変更するフォームを表すコンポーネントを作成しました。オブジェクトがapp.component.tsに存在する：

export class AppComponent { 
    selectedItem: Item; 
} 

それは双方向そうようapp.component.htmlからコンポーネントへの結合を介して渡される：コンポーネント内

<item-details [(item)]="selectedItem"></item-details> 

、Itemの個々のフィールドは、に結合していますユーザーがデータを更新できるようにするための入力コントロール。例：

<mat-form-field class=name> 
    <input matInput [(ngModel)]="item.name" value="{{item.name}}" required placeholder="Name"> 
    <mat-error>Item name can not be left blank</mat-error> 
</mat-form-field> 

テキストが表示されるまですべてが機能しますREA：

<mat-form-field class="full-width"> 
    <textarea id=description matInput [(ngModel)]="item.description" placeholder="Description">{{item.description}}</textarea> 
</mat-form-field>   

それは動作しますが、それは例外をスロー：それは価値がfalseからtrueに行って、このような表示されることを言うように、

ExpressionChangedAfterItHasBeenCheckedError 

エラーが直接<textarea>に縛られていませんフォーム上のvalidプロパティに関連しており、ヒント：hereです。

興味深いことに、私は、このような内容の後にスペースを入れることでなど<textarea></textarea>の内容を変更することでエラーを回避することができます

<textarea ...>{{item.description}} </textarea> 

しかしitem.descriptionがnullでない場合にのみ動作すること。 nullの場合、エラーが再び表示されます。

selectedItemに双方向バインディングを持つ別の子コンポーネントからselectedItemへの変更をトリガーしています。ユーザーが項目を選択すると、新しいItemがアプリまで流れて、詳細コンポーネントに戻ります。

私はEverything you need to know about the 'ExpressionChangedAfterItHasBeenCheckedError' errorの記事を読んでいます。記事を引用するために、 "私はそれらを使用することをお勧めしませんが、むしろあなたのアプリケーションを再設計する"。

素晴らしい！どうやって？コントロールAを使用してItemを選択し、コントロールBを使用してそのコントロールを編集するにはどうすればよいのですか？コントロールAとBがこのエラーを引き起こさずに互いに話す正しい方法は何ですか？

Answer 1

あなたがngModelを使用している場合{{item.description}}は、役に立たない十分なはずです：

<mat-form-field class="full-width"> 
    <textarea id=description matInput [(ngModel)]="item.description" placeholder="Description"></textarea> 
</mat-form-field>