Отображение вложенного ключевого значения парных объектов в Angular 7

Question

Есть ли способ отображать вложенные объекты значения ключа в Angular, не сталкиваясь с «ошибкой повторных массивов только для ngFor поддержки»?

Пример:

Объект A = [{ "apple": null, "pear": null, "orange": null }];

Объект B = [{ "apple": { "label-a": 2.02 }, "pear": { "label-b": 1.99 }, "orange": { "label-c": 1.85 } }]

Объект A - это когда нет значения для данных ключа, Объект Б находится там, где есть. Как можно отобразить оба, не вызывая ошибку angular? : (

Любая помощь приветствуется:)

Answer 1

Object A
<div *ngFor="let item of A | keyvalue">
    key {{item.key}} and value {{item.value}}
</div>
<br/>
Object B
<div *ngFor="let item of B | keyvalue">
    key {{item.key}} and value
    <strong *ngFor="let innerkey of item.value | keyvalue">
Inner Key {{innerkey.key}} and value {{innerkey.value}}
  </strong>
</div>

в component.ts

 A = new Map<string, string>();
  B = new Map<string, any>();
  constructor() {
    this.setObjectA();
    this.setObjectB();
  }

  setObjectA() {
    this.A.set("apple", null); // a string key
    this.A.set("pear", null); // a numeric key
    this.A.set("orange", null);
  }

  setObjectB() {
    this.B.set("apple", { "label-a": 2.02 }); // a string key
    this.B.set("pear", { "label-b": 1.99 }); // a numeric key
    this.B.set("orange", { "label-c": 1.85 });
  }

и ссылке на стек стека код на стеке стека