CODEWITHSUNDEEP
angularngfor
Ares
Ares

Reputation: 431

How to access property in item from a ngFor loop?

I am using ngFor directive to iterate over data fetched from SQL back end. The data is filtered into rows and are structured in a JSON format.

I want to access the value of a property of the CURRENT index in the loop and bind it to the ngModel directive, but when I try, I get the LAST index's value copied into all of my rows.

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

Example of data being iterated through:

[{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"}]

Keys Pipe file: 

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

Screenshot of what's being returned:

Repeating property values in ngFor loop

Upvotes: 1

Views: 1417

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73731

The item loop variable already refers to an item of the loadedTableData array. You don't need to use an additional index i in the ngModel binding. You can use [(ngModel)]="item[property]".

Since the input fields are inside a form, make sure that each input name is unique. One way to achieve that is to combine the loop index i and the property value in the name:

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

Here is the equivalent property binding syntax:

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

Upvotes: 1

Kyle Burkett
Kyle Burkett

Reputation: 1443

With the current layout, everything you use in <td> correlates to one item that has several properties. The index of the array correlates to loadedTableData.

If you use it from this level it would look like loadedTableData[i][property]

Upvotes: 3

Related Questions