новый извлеченный список выбранного элемента из списка

Question

У меня есть список, который извлекает данные из объекта из бэкэнда, и после выбора элемента из этого списка он должен отображать свои элементы, но я не знаю, как отобразить его в html или в rxjs.

Вот мое текущее состояние после выбора элемента Test1 из списка, он получает свои внутренние элементы, которые info 1 и info 2.

List:
  List: Array(2)
     0: {name: "Test1", item: Array(2)}
     1: {name: "Test2", item: Array(1)}
     length: 2
     __proto__: Array(0)
   selectedItemData: Array(2)
     0: {name: "info 1", item: Array(1)}
     1: {name: "info 2", item: Array(4)}

Но список не меняется, даже если все работает для извлечения части каждого выбранного элемента.

Вот мой HTML:

      <ul class="unstyled" *ngFor="let i of (listObservable$|async).list.List">
        <li><a (click)="selected(i.name)">{{i.name}}</a></li>
      </ul>

Answer 1

При использовании асинхронного канала лучше всего использовать ngIf и сопоставить его с переменной представления, чтобы вы отображали элемент только после того, как наблюдаемое издало.

<ng-container *ngIf="listObservable$ | async as listObj">
  <ul class="unstyled" *ngFor="let i of listObj.list.List">
    <li><a (click)="selected(i.name)">{{i.name}}</a></li>
  </ul>
</ng-container>