как отобразить данные с помощью * 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

Привет, во-первых, я бы порекомендовал вам поместить свой код в функцию, подобную

ngOnInit() {
    this.getAllQueries();
}

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

, убедитесь, что вы вызываете это в функции ngOninit или в своем конструкторе

Answer 2

Вам не нужно условие 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>

Answer 3

вы можете попробовать вот так

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