Проблема Angular 6 в получении HTML-данных с помощью asnyc pipe

Question

Я пытаюсь отобразить данные из API REST, которому требуется некоторое время для сопоставления желаемого запроса. Поэтому я попробовал async трубу в Angular:

Вот класс:

  private json: Observable<JsonResponseDTO>;

  constructor(private dtoService: PoolDTOServiceService) { }

  ngOnInit() {
    this.getPool();
  }

  getPool() {
    this.json = this.dtoService.getPools();
  }

и шаблон:

<div *ngIf="json | async as json; else loading">
  <ng-container *ngIf="json.pools.length >=134; else noItems">
    <div *ngFor="let pool of json.pools">
      {{p.name}}
    </div>
  </ng-container>
  <ng-template #noItems>No items</ng-template>
</div>
<ng-template #loading>Loading</ng-template>

В течение короткого времени, шаблон загрузки показывает, но затем я получаю ошибку:

ERROR TypeError: "_co.p is undefined"   

в шаблоне, строка 7: 41.
Может ли кто-нибудь помочь мне здесь? Правильно ли я использую асинхронный канал?

Answer 1

p.name не будет найдено, потому что p нигде не определено. Вы должны исправить эту опечатку и использовать pool.name:

<ng-container *ngIf="json.pools.length >=134; else noItems">
    <div *ngFor="let pool of json.pools">
      {{pool.name}}
    </div>
  </ng-container>

Answer 2

 <div *ngFor="let pool of json.pools">
      {{p.name}}
 </div>

Ваш p не определен. То, что вы хотите:

 <div *ngFor="let pool of json.pools">
      {{pool.name}}
 </div>