12

入力から文字列の配列をバインドしようとしているので、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>

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

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

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

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

クエリは、フォーム コンポーネント内のクエリの配列ですが、次のようになります。

queries:Query[] = [];

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

4

3 に答える 3

22

問題は、 でプリミティブ値の配列 ( 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ません。

于 2016-07-17T17:14:00.133 に答える
-2

@Input() 関数を使用し、クエリ配列 + クエリ インデックス番号を渡すことで、これを解決しました。ご支援ありがとうございます。

于 2016-07-17T18:43:25.467 に答える