Angular2 ngModel внутри ngFor

Я пытаюсь связать массив строк из моих входных данных, поэтому в 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>

но это не сработало, как ожидалось, потому что когда я регистрирую переменную слов, она показывает пустой массив, инициализированный в моем классе компонентов. Кроме того, я регистрирую переменную из другого компонента, если это должно быть проблемой для моей проблемы. У меня есть два компонента:

  • компонент формы, содержащий массив компонентов запроса.
  • в запрос дочернего компонента, имеющего массив строк слов.

Итак, переменная слов объявляется в компоненте запросов, но я регистрирую эту переменную через компонент формы следующим образом:

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

While queries-это массив запросов в компоненте формы:

queries:Query[] = [];

Спасибо за вашу помощь!

7
angular angular2-ngmodel data-binding

3 ответов

проблема заключается в использовании массива примитивных значений (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 но я не уверен.

14

каждый входной тег должен иметь уникальный атрибут "name", как описано в:

Angular2 ngModel внутри ngFor (данные не привязываются к входу)

вот исправленный код:

<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>

12

решил это, используя функцию @Input () и передав массив запросов + номер индекса запроса. Спасибо ребята за поддержку.

1