Question

我希望*ngFor遍历通过异步管道提供的http.get的结果。项目未呈现，加载div也未呈现。

服务：

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>

未显示loading 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，因为我想它不会独立呈现。

希望有帮助。

异步管道和ngFor没有显示项目

1 个答案: