首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何从ngFor循环访问item中的属性?

如何从ngFor循环访问item中的属性?
EN

Stack Overflow用户
提问于 2019-06-13 02:24:10
回答 2查看 682关注 0票数 1

我使用ngFor指令来迭代从SQL后端获取的数据。数据被过滤成行,并以JSON格式进行结构化。

我想访问循环中当前索引的一个属性的值,并将其绑定到ngModel指令,但是当我尝试时,我得到了复制到所有行中的最后一个索引值。

代码语言:javascript
复制
<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>

遍历数据的示例:

代码语言:javascript
复制
[{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"}]

密钥管道文件:

代码语言:javascript
复制
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;
  }
}

返回内容的屏幕截图:

Repeating property values in ngFor loop

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-13 03:05:59

item循环变量已引用loadedTableData数组的一项。您不需要在ngModel绑定中使用额外的索引i。您可以使用[(ngModel)]="item[property]"

由于输入字段位于form中,因此请确保每个输入name都是唯一的。实现这一点的一种方法是将循环索引iname中的property值结合起来

代码语言:javascript
复制
<input [(ngModel)]="item[property]" name="{{ 'input_' + property + '_' + i }}" ... >

以下是等效的属性绑定语法:

代码语言:javascript
复制
<input [(ngModel)]="item[property]" [name]="'input_' + property + '_' + i" ... >
票数 1
EN

Stack Overflow用户

发布于 2019-06-13 02:49:47

使用当前布局,您在<td>中使用的所有内容都与一个具有多个属性的项目相关联。数组的索引与loadedTableData相关。

如果您从这个级别使用它,它将看起来像loadedTableData[i][property]

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56568287

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档