Question

我在子组件中有一个简单的Http请求，但是当我使用* ngFor遍历它时，它没有显示在DOM中，因为最初的值是不确定的。

当我在主要组件（App组件）中具有相同的代码片段时，它将显示出来，而我不明白为什么。

我尝试过使用ASYN / AWAIT和其他各种方式，但无济于事。

<div *ngFor="let i of arr">  <li>
  {{i.id}}
</li></div>

  url:string = "https://jsonplaceholder.typicode.com/posts";
  arr;
  constructor(private http: HttpClient){}

  ngOnInit(){

      this.http.get(this.url).subscribe(data => {
        this.arr = data
      console.log(this.arr);

      });

  }

该数组已记录在控制台中，但未在DOM中显示。

Answer 1

像这样使用async管道：

组件TS文件

 url:string = "https://jsonplaceholder.typicode.com/posts";
  arr;
  constructor(private http: HttpClient){}

  ngOnInit(){

      //If you expect that your API never return a null/undefined response
      //then remove filter operator
      this.arr = this.http.get(this.url).pipe(filter(r => !!r));    
  }

模板：

<div *ngFor="let i of arr | async">  <li>
  {{i.id}}
</li></div>

ngFor不显示数据，导致子组件中出现异步问题

1 个答案: