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

Question

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

现在，在我的 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>

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

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

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

Answer 1

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

2.: 将参数映射到 key-value 数组再显示。

在你的 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>

Answer 2

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

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

迭代对象

问题 2： 如何在 ngFor div 中显示我的标签和输入，标签将生成参数名称（如 "departure-angle") 和输入值显示“13”?

答案二：

解决方案一： 在组件中添加一个新变量：

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>

方案二：可以加个管道，

这个管道接受对象和return对象数组

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>

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

Accessing json object array and showing in Angular 4

arrays

object

ngfor

angular