Question

我遇到了一个严重的问题how to get Key and Value of JSON object using *ngFor并找到了一个很好的解决方案here （如果此问题被标记为重复）。

我使用了Pipes，但solution似乎非常低效，因为每次变更检测器检查更改时它都会生成集合。忽略复杂性并使用此解决方案仍然没有解决问题，因为它迭代从组件返回的新数组。

我如何使用此解决方案来操作原始对象？

业务要求：保持 键/值 对无限制并允许用户更改两者前端。

以下是代码段：

<tr *ngFor="let properties of matrixProperties">
    <button (click)="addNewProperty(properties)">Add New Property</button>
    <div *ngFor="let property of properties | keys">
        <td>
            <inline-editor type="textarea" [(ngModel)]="property.key"></inline-editor>
        </td>
        <td>
            <inline-editor type="textarea" [(ngModel)]="property.value"></inline-editor>
        </td>
    </div>
</tr>

addNewProperty(properties) {
  properties.id = 4;
  properties['key'] = "value";   //adding new key/value pair
}

Answer 1

<div *ngFor="let property of properties | keys">在属性中，您将获得一组对象。

for (const prop in this.properties) {
          if (this.properties.hasOwnProperty(prop)) {
            this.ResultData.push(prop);
          }
        }

在ResultData数组中，只有键将ResultData映射到ng，因为你只能得到键

如何使用* ngFor访问对象的键和值（带参考）？

1 个答案: