установить ссылку на динамическую переменную для ngmodel в угловых 2+ - PullRequest
0 голосов
/ 14 сентября 2018

У меня есть заголовки таблицы, которые должны быть заполнены на основе json {id, name} this.id - это имя ngModel, которое я использовал в компоненте и которое необходимо сопоставить для настраиваемого фильтра соответственно.

скажем,

 list=[{id:ageSearch,name:age},{id:adressSearch,name:adress}]

поэтому, когда я ввожу значение для первого поля ввода текста, нужно заполнить ageSearch и отфильтровать данные, аналогично для adressSearch Теперь я хотел бы знать, как динамически отобразить переменную ageSearch, adressSearch внутри ngfor.

Я пытался использовать

 <div *ngFor="let item of list;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="item[id]" placeholder="item">
    </div>

Но оно заполняет значение ageSearch вместо привязки переменной. Может кто-нибудь сказать, пожалуйста, пытаюсь ли я что-то, что возможно или нет. Если так, как я могу достичь ожидаемого потока.

Ожидаемый результат должен быть

<div>
     <input [(ngModel)]="ageSearch" placeholder="item">
</div>
<div>
     <input [(ngModel)]="adressSearch" placeholder="item">
</div>

Edit: в компоненте у меня есть переменные, объявленные как пусть ageSearch: любой; let adressSearch: любой;

эти значения должны быть переданы в пользовательский фильтр. поэтому я должен установить ngModel входных данных для привязки этих имен переменных, чтобы изначально они выглядели пустыми при загрузке, а когда мы вводим значения, они отражают значения ageSearch и adressSearch соответственно. который затем передается в пользовательский фильтр. Спасибо.

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

После некоторого пробного использования я получил это, заменив

<input [(ngModel)]="item.id" name="{{item.name}}" placeholder="item">

с

<input [(ngModel)]="this[item.id]" name="{{item.name}}" placeholder="item">

Спасибо.

0 голосов
/ 14 сентября 2018

Измените его на:

<input [(value)]="item.id" placeholder="item">

или на:

<input [(value)]="item['id']" placeholder="item">

Если вам нужно использовать ngModel, как в вашем примере, то вам нужно будет дать емуимя также:

<input [(ngModel)]="item.id" name="{{item.name}}" placeholder="item">
...