Достъп до 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