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。如果它显示没有数据错误消息，请使用 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>

如何使用* ngFor显示数据

3 个答案: