在 Angular 中使用 ngFor 正确显示数据

Question

我正在尝试显示从端点接收到的一些数据。将它打印到控制台日志工作正常，但我无法在 HTML 页面上显示它，即该页面是空白的。我试过

<ul>
        <li *ngFor="let animal of animals | async">
                {{ animal }} 
        </li>
</ul>

这是我设置组件的方式：

export class PageComponent implements OnInit {

  animals : Animals [];

  constructor(private store: Store) { }

  ngOnInit() {
    this.store.dispatch(fetchUsers).subscribe(animals => {
      this.animals  = animals ;
      console.log(this.animals );
    });
  }

}

在控制台中，我收到了 JSON，这是我从我的端点接收到的：

animals :
 animals : Array(1)
  0: {id: "1562", animalType: "dog"}

我希望它成为 return 动物对象，但稍后我打算让它打印 animalType

Answer 1

animals 不是可观察的，你为什么要使用异步？？真的：

<ul>
        <li *ngFor="let animal of animals">
                {{ animal }} 
        </li>
</ul>

Answer 2

您不需要 async 运算符，因为您没有为属性动物使用 promise 或 observable，所以您所需要的只是对它的引用。您还需要为您的数组尚未初始化时添加某种保护。我为此使用了 ngIf：

<ul *ngIf="animals">
        <li *ngFor="let animal of animals">
                {{ animal.animalType }} 
        </li>
</ul>

https://angular.io/api/common/AsyncPipe

然后在你的component.ts

  ngOnInit() {
    this.store.dispatch(fetchUsers).subscribe(animals => {
      this.animals  = animals.animals ; // looks like you need to work on this
      console.log(this.animals );
    });
  }

在 Angular 中使用 ngFor 正确显示数据

Displaying data with ngFor in Angular properly

html

angular

ngxs