Как получить доступ к свойству в элементе из цикла ngFor? - PullRequest
Новая
       13

Как получить доступ к свойству в элементе из цикла ngFor?

1 голос
/ 12 июня 2019

Я использую директиву ngFor, чтобы перебрать данные, извлеченные из SQL-сервера. Данные фильтруются в строки и структурированы в формате JSON.

Я хочу получить доступ к значению свойства индекса CURRENT в цикле и связать его с директивой ngModel, но когда я пытаюсь, я получаю значение индекса LAST, скопированное во все мои строки. 

<form #updateRowForm="ngForm" class="update-row-form">
<table mdbTable #tableEl="mdbTable" class="table table-bordered
table-responsive-md table-striped text-center">
<thead>
    <tr>
    <th *ngFor="let head of loadedTableData[0] | keys;">{{head}}</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let item of loadedTableData; let i = index;">
    <td *ngFor="let property of item | keys;" class="form-group">

    <!--the below will produce undefined for ngModel -->
    <!-- but if I use the below syntax for placeholder attribute, it displays the correct data. Problem is, I need to set this as a default value, hence use of ngModel -->

        <input #editRowProp mdbInput
            [(ngModel)]="item[i][property]"
            class="form-control"
            name="{{property}}"
            placeholder="{{item[property]}}"
            type="text">
    </td>
    <td>
        <button type="button" mdbBtn class="btn btn-primary
            rounded
            btn-sm my-0"
            (click)="updateRow(updateRowForm, item)">Update</button>
            <hr>
        <button type="button" mdbBtn class="btn btn-danger
            rounded
            btn-sm my-0" (click)="deleteRow(item)">Remove</button>
    </td>
    </tr>
</tbody>
</table>

Пример данных, повторяемых через: 

[{TaxCode: "1A", TaxDescription: "testing"},{TaxCode: "A1", TaxDescription: "Costa Rica Baggage Inspection Fee"},{TaxCode: "A6", TaxDescription: "Tunisia Tourism Tax"},{TaxCode: "A7", TaxDescription: "Bolivia Passenger Service Charge"},{TaxCode: "AA", TaxDescription: "Dominican Republic Departure Tax"},{TaxCode: "AB", TaxDescription: "Haiti Airport Departure Tax"}, {TaxCode: "DR", TaxDescription: "Egypt Airport Facility Charge"}]

Файл ключей ключей: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    const keys = [];
    for (const key in value) {
      keys.push(key);
    }
    return keys;
  }
}

Скриншот того, что возвращается:

Повторение значений свойств в цикле ngFor

Ответы [ 2 ]

3 голосов
/ 12 июня 2019

В текущем макете все, что вы используете в <td>, соотносится с одним элементом, имеющим несколько свойств. Индекс массива соответствует loadedTableData.

Если вы используете его с этого уровня, он будет выглядеть как loadedTableData[i][property]

1 голос
/ 12 июня 2019

Переменная цикла item уже ссылается на элемент массива loadedTableData. Вам не нужно использовать дополнительный индекс i в привязке ngModel. Вы можете использовать [(ngModel)]="item[property]".

Поскольку поля ввода находятся внутри form, убедитесь, что каждый вход name уникален. Один из способов добиться этого - объединить индекс цикла i и значение property в name: 

<input [(ngModel)]="item[property]" name="{{ 'input_' + property + '_' + i }}" ... >

Вот синтаксис привязки эквивалентного свойства: 

<input [(ngModel)]="item[property]" [name]="'input_' + property + '_' + i" ... >
...