Async pipe и ngFor не отображают элементы

Question

Я ожидаю, что *ngFor будет перебирать результаты http.get, которые доступны через асинхронный канал.Элементы не отображаются, как и раздел загрузки.

Сервис:

public getKeywords = () =>  {
   return this.http.get<getKeywords>(`${this.uri}/keywords`);
}

Интерфейс:

interface getKeywords {
  keywords: Array<object>;
}

TS:

export class KeywordsSettingsComponent implements OnInit {

  public currentKeywords$: any;

  constructor(private profileProvider: ProfileProvider) { }

  ngOnInit() {
    this.currentKeywords$ =
      this.profileProvider.getKeywords().pipe(map(({ keywords }) => keywords));
  }
}

Шаблон:

<div class="row">
  <ng-template *ngIf="currentKeywords$ | async as currentKeywords ; else loading">
    <div class="keyword" * ngFor="let keywordObj of currentKeywords">
      {{ keywordObj.keyword }}
      <span class="icon-close"> </span>
    </div>
  </ng-template>
  <ng-template #loading> Loading keywords...</ng-template>
</div>

Тот факт, что загрузочный div не отображается, указывает на то, что значение не передается.Если я подписываюсь в ngOnInt следующим образом:

 this.currentKeywords$ = this.profileProvider.getKeywords().pipe(map(({keywords}) => keywords), share()).subscribe(res => res));

Div загрузки показывает, но результат не отображается в *ngFor div.Однако я понимаю, что асинхронный канал управляет подписками / отписками, поэтому подписка в ngOnInit должна быть ненужной.

---

Результат от http.get: HTTP-вызов возвращает объект, имеющий несколько свойств, одним из которых является «ключевые слова», которое содержит массив объектов.Я использую map () для сопоставления с одним свойством и доступа к массиву объектов.

{..."keywords":[{"id":331,"keyword":"spam"},{"id":330,"keyword":"foo"},{"id":332,"keyword":"brexit"}]}

Answer 1

Исходя из того, что HTTP возвращает объект, вам нужно изменить это:

<div class="keyword" * ngFor="let keywordObj of currentKeywords">

к этому:

<div class="keyword" *ngFor="let keywordObj of currentKeywords.keywords">

и я бы тоже это изменил:

this.currentKeywords$ =
      this.profileProvider.getKeywords().pipe(map(({ keywords }) => keywords));

к этому также:

this.currentKeywords$ = this.profileProvider.getKeywords();

... поскольку эта карта на самом деле ничего не отображает.

Вам также может понадобиться изменить свой первый <ng-template, например, на <div, поскольку я думаю, что он не будет визуализироваться сам по себе.

Надеюсь, это поможет.