Как получить динамический список, когда ключ неизвестен в HTML-форме

Question

Я работаю над угловым применением. я могу отобразить список с ключом см. пример

  <ion-item *ngFor="let list of lists" [(ngModel)]="lists" 
        <ion-row>

            <ion-col col-7 class="title">
                {{ list.accountName}}

как отобразить список, когда ключ и массив оба являются динамическими например я хочу отобразить list = [{key1: "fd", key2: "fdf"}]

на html-странице я не знаю, что такое ключ 1 или ключ 2, он будет динамическим или каждый раз, когда ключ будет меняться, как печатать {{Array.unkhownkey}

У меня есть другое решение
как объединить, если я получу ключ в 2 разных списка и список в другом списке например {{Массив}}. {{Ключ}}

Answer 1

Использование трубы

<div *ngFor="let list of lists" [(ngModel)]="lists" >
    <ion-item *ngFor="let key of list | keys" >
        <ion-row>
            <ion-col col-7 class="title">
                {{key}}: {{c[key]}}
            </ion-col>
       </ion-row>
    </ion-item>
</div>

ц

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

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

Answer 2

Вы можете создать канал, который вы можете вставить в * ngFor html.

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

@Pipe({
  name: 'forArrayProp'
})
export class ForArrayProp implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

Тогда в шаблонах:

<div *ngFor="let property of response">
    <div *ngFor="let itemkey of property | forArrayProp">
         {{property[itemkey]}}
    </div>
</div>