web-dev-qa-db-ja.com

ng-reflect-modelは正しい値を示しますが、入力には反映されません

非常に特殊なユーザーケースでアプリケーションが誤動作するという非常に奇妙な問題が発生しました。ユーザーが質問と回答を追加して編集できるポータルがあります。この場合、set（q + a）を削除してから追加しようとすると、モデルは更新されますが、ビューはプレースホルダーから値を取得し、それ自体を更新します。ここでは、配列の値をスプライスしてプッシュし、ngForを使用してレンダリングしています。最後の要素はダミーであり、押し上げられる値を入力するために使用されます。

意味がある場合はスクリーンショットを添付してください。

テキストボックスの場合、ng-reflect-modelは正しい質問を示していますが、要素自体はプレースホルダーテキストを表示しています。

angularangular2-templateangular2-forms
14
Pratik Barasia

Angularが配列の要素を適切に追跡できなかったため、問題が発生しているようです。これは非常に難しい方法であることがわかりました。したがって、ngByにtrackBy属性を追加するだけで、これを解決することができます。

これを私のコンポーネントに追加しました：

customTrackBy(index: number, obj: any): any {
  return index;
}

そしてテンプレートで：

<div class="margin-bottom-15"
     *ngFor="let assessment of language.assessments; trackBy:customTrackBy">

だから私は基本的にangular=配列内の要素をインデックスで追跡するように求めています。それで問題は解決しました。

ここでの評価は、質問と回答の各セットのモデルです。

13
Pratik Barasia

ネストされたngForを使用している場合、名前属性は一意ではない可能性があります。一意である必要があります。したがって、一意にするために、forループのインデックスを持つ接尾辞name属性。

 <form #f="ngForm" validate>
      <div *ngFor="childItem of parentArray; index as pIndex;">
           <div *ngFor="childArray of childItem.parameters;index as cIndex;">
                 First Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.firstname" required>
                 Last Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.lastname" required>

                <button type="button" [disabled]="!f.valid"
                (click)="submitForm();"> Submit  </button>
            </div>
       </div>
 </form>
3
Ankush Vaish

他にあなたは使うことができます

*ngFor="childItem of parentArray; index as i;"

そして

[attr.data-target]="'#test' + i"

そして

name="test{{i}}
0
Mayur Saner