Доступ к массиву объектов json и отображение в Angular 4

У меня есть объект, состоящий из полей, других объектов и массивов, и он выглядит так

Теперь в моем 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.

Теперь меня беспокоят 2 вопроса:

  1. По какой-то причине у меня нет доступа к массиву параметров, поэтому я могу использовать ngFor для их создания.
  2. Как я могу показать свою метку и ввод в ngFor div таким образом, чтобы метка генерировала имя параметров (например, «угол отклонения») и значение во входных данных, чтобы показать «13»?

arrays angular object ngfor
person John Theoden    schedule 31.03.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вопрос 1: По какой-то причине у меня нет доступа к массиву параметров, поэтому я могу использовать ngFor для их создания.

Ответ 1: parameters не массив, это объект, вы не можете выполнить итерацию объекта с помощью &ngFor

Вопрос 2: Как я могу показать свою метку и ввод в ngFor div таким образом, чтобы метка генерировала имя параметров (например, «угол отклонения») и значение во вводе, чтобы отображать «13» ?

Ответ 2:

Решение 1. В компоненте добавьте новую переменную:

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>
person Sravan    schedule 31.03.2018
comment
По соображениям производительности я бы не рекомендовал использовать эту функцию там. Эта функция будет вызываться каждый раз, когда запускается обнаружение изменений. - person pascalpuetz; 31.03.2018
comment
Это не функция, она просто вернет массив keys - person Sravan; 31.03.2018
comment
Object.keys () - это не функция? Конечно, он вернет массив ключей, но функция, создающая этот массив ключей, будет вызываться каждый раз при запуске CD. - person pascalpuetz; 31.03.2018
comment
Решение трубы кажется отличным. - person pascalpuetz; 31.03.2018

arrow_upward
1
arrow_downward

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>
person pascalpuetz    schedule 31.03.2018