访问 json 对象数组并在 Angular 4 中显示答案

【问题标题】：Accessing json object array and showing in Angular 4访问 json 对象数组并在 Angular 4 中显示
【发布时间】：2018-09-10 07:12:30
【问题描述】：

我有一个由字段、其他对象和数组组成的对象，它看起来像这样

现在，在我的 html 中，我访问 aaType 的数据、调整等。

<div class="flexdirectioncolumn">
    <div class="flex50">
        <label class="label-prop-a"> Name </label>
        <div>
            <input #name type="text" value={{entity.name}} (keyup.enter)="changeName(name.value)" />
        </div>
    </div>
    <div class="flex50">
        <label> AaType </label>
        <div>
            <input #aaType type="text" value={{entity.aaType}} (keyup.enter)="changeAaType(aaType.value)" />
        </div>
    </div>
    <div class="flex50">
        <label> Adjust </label>
        <div>
            <input #adjustableInput type="checkbox" value={{entity?.adjust}} (keyup.enter)="changeAdjust(adjustInput.value)" />
        </div>
    </div>
    <div class="flex50">
        <label> System </label>
        <div>
            <input #systemInput type="text" value={{entity?.system}} />
        </div>
    </div>
    <div class="flex50">
        <label>{{entity.creat.rule}}</label>
        <div *ngFor="let param of entity.creat.parameters">
            <label>{{param}}</label>
            <input type="text" value={{param.value}} />
        </div>
    </div>
</div>

我设法展示了你可以在我的 html 中看到的 creationInfo.rule。

现在有两个问题困扰着我：

由于某种原因，我无法访问参数数组，因此我可以使用 ngFor 来创建它们。
如何在 ngFor div 中显示我的标签和输入，标签将在输入中生成参数名称（如“出发角”）和值以显示“13”？

【问题讨论】：

标签： arrays angular object ngfor

【解决方案1】：

问题 1： 由于某种原因，我无法访问参数数组，因此我可以使用 ngFor 来创建它们。

答案 1： parameters 不是数组而是对象，不能使用 &ngFor 迭代对象

问题 2： 如何在 ngFor div 中显示我的标签和输入，标签将在输入中生成参数名称（如“出发角”）和值以显示“13”？

答案 2：

解决方案 1： 在 Component 中添加一个新变量：

objectArray = Object.keys; // It gives the array of object keys

在 html 中使用 *ngFor="let param of objectArray(entity.creationInfo.parameters)",

<div class="flex50">
    <label>{{entity.creationInfo.rule}}</label>
    <div *ngFor="let param of objectArray(entity.creationInfo.parameters)">
        <label>{{param}}</label>
        <input type="text" value={{entity.creationInfo.parameters[param]}} />
    </div>
</div>

解决方案 2：您可以添加管道，

此管道接受对象并返回对象数组

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


@Pipe({name: 'array'})
export class ArrayPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let array = [];
    for (let key in value) {
      array.push({key: key, value: value[key]});
    }
    return array;
  }
}

在html中，

<div class="flex50">
    <label>{{entity.creationInfo.rule}}</label>
    <div *ngFor="let param of entity.creationInfo.parameters | array">
        <label>{{param.key}}</label>
        <input type="text" value={{param.value}} />
    </div>
</div>

【讨论】：

出于性能原因，我不建议在那里使用该功能。每次更改检测运行时都会调用此函数。
它不是一个函数，它只会返回keys的数组
Object.keys() 不是函数？当然，它会返回一个键数组，但是每次 CD 运行时都会调用创建这个键数组的函数。
管道解决方案看起来很棒。

【解决方案2】：

1.: 参数不是数组而是对象。所以你不能使用 *ngFor 来访问它们。

2.：在显示参数之前将参数映射到键值数组。

在您的 ts 文件中：

public params:Array<{key: string, value: string}>;

// Call this method when the "entity" object has been initialized.
private setParams():void {
    this.params = Object.keys(this.entity.creationInfo.parameters)
         .map(paramKey => ({
             key: paramKey, 
             value: this.entity.creationInfo.parameters[paramKey]
         }));
}

然后，在您的模板中：

<div *ngFor="let param of params">
    <label>{{param.key}}</label>
    <input type="text" value={{param.value}} />
</div>

实现此目的的另一种方法是使用Object.entries() 函数：

public params:Array<Array<any>>;

// Call this method when the "entity" object has been initialized.
private setParams():void {
    this.params = Object.entries(this.entity.creationInfo.parameters);
}

然后，在您的模板中：

<div *ngFor="let param of params">
    <label>{{param[0}}</label>
    <input type="text" value={{param[1]}} />
</div>

【讨论】：