web-dev-qa-db-ja.com

ngFor内のAngular2 ngModel

私は入力から文字列の配列をバインドしようとしているので、htmlファイルでこれを書きました：

<div *ngFor="let Word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in]"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

しかし、単語変数をログに記録すると、Componentクラスで初期化された空の配列が表示されるため、これは期待どおりに機能しませんでした。また、別のコンポーネントの変数をログに記録しますが、それが私の問題の問題であると思われます。私には2つのコンポーネントがあります。

  • クエリコンポーネントの配列を含むフォームコンポーネント。
  • 単語文字列の配列を持つクエリ子コンポーネント。

したがって、words変数はクエリコンポーネントに宣言されますが、次のようにフォームコンポーネントを介してこの変数を記録しています。

console.log(JSON.stringify(this.queries));

クエリは、フォームコンポーネント内のクエリの配列です。

queries:Query[] = [];

ご協力いただきありがとうございます！

data-bindingangularangular2-ngmodel
10
Mehdi Benmoha

問題は、wordsでプリミティブ値の配列（ngFor）を使用することです。

単語を次のようなオブジェクトの配列に変更できます

words = [{value: 'Word1'}, {value: 'Word2'}, {value: 'Word3'}];

そしてそれを次のように使用します

  <div *ngFor="let Word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in].value"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

これはtrackByを使用しても解決可能かもしれませんが、わかりません。

17
Günter Zöchbauer

各入力タグには、次のように定義された一意の「名前」属性が必要です。

ngFor内のAngular2 ngModel（データが入力にバインドされていない）

修正されたコードは次のとおりです。

<div *ngFor="let Word of words; let in=index" class="col-sm-3">
  <div class="form-group">
    <input type="text" [(ngModel)]="words[in]" name="Word{{in}}" class="form-control" [attr.placeholder]="items[in]" required>
  </div>
14
Mate Šimović

@Input（）関数を使用し、クエリ配列+クエリインデックス番号を渡すことでこれを解決しました。サポートしてくれてありがとう。

1
Mehdi Benmoha