如何使用* ngFor显示数据

Question

我试图用* ngFor显示数据，但是由于某种原因，这不显示任何数据，也没有任何错误。

我已经尝试了很多在互联网上找到的样本，但没有一个起作用，所以我决定在这里询问。

这是我所拥有的：ts文件：

  public querySuccess: any[];


  this.userService.getMentions().subscribe(
  (returnAPI) => {
    this.querySuccess = returnAPI.data;
  });

我的html：

<div *ngIf="returnAPI">
  <div *ngFor="let key of querySuccess">
    <div>{{querySuccess.firstName}}</div>
  </div>
</div>

<div *ngIf="!returnAPI">
    <div>0 results found!</div>
</div>

getMentions().subscribe()返回此Json：

    {
    total: 3,
    data:[
    {userId: 0, firstName: "test", lastName: "xzy"},
    {userId: 0, firstName: "john", lastName: "yeet"},
    {userId: 0, firstName: "jamal", lastName: "abc"}]
    }

Answer 1

你可以这样尝试

<div *ngIf="returnAPI">
  <div *ngFor="let key of querySuccess">
    <div>{{key.firstName}}</div>  <!-- key instead of querySuccess -->
  </div>
</div>

Answer 2

嗨，我首先建议您将代码放入类似的函数中

ngOnInit() {
    this.getAllQueries();
}

getAllQueries() {
    this.userService.getMentions().subscribe(
        (returnAPI) => {
            this.querySuccess = returnAPI.data;
         return this.querySuccess;
   });
}

确保在ngOninit函数或构造函数中调用此函数

Answer 3

您不需要那if条件来循环该ngFor.If它表明没有数据错误消息使用querySuccess，因为returnAPI似乎没有在任何地方定义。

 <div *ngIf="querySuccess">
  <div *ngFor="let key of querySuccess">
    <div>{{key.firstName}}</div>//key is single istance queryselector is full array.
  </div>
</div>

<div *ngIf="!querySuccess">
    <div>0 results found!</div>
</div>