如何以角度循环遍历异步数据

Posted 2023-01-28

我有一个角度组件，可以从服务器获取数据，然后在将其分配给变量之前对其进行转换：

class Component 
  data = [];

  ngOnInit() 
    this.store.select(data).pipe(
      map(data =>  this.data = this.transformData(data); )
    ).subscribe();
  

  transformData(data) 
    // data is an array of data
    return data.map(item => item);
  

上面是我正在做的简化版本，transform方法做得更多，但无关紧要。

然后我尝试使用数据进行for循环，但它不会显示任何内容，也不会抛出任何错误：

<div *ngFor="let item of data|async">
   item.prop1   item.prop2 
</div>

我不确定为什么会发生这种情况-我习惯于在传递道具或更新状态并重新渲染组件时做出反应，角度上的工作流程是什么？

我尝试过this solution，但它仍然不会显示任何数据：

class Component 
  data = [];

  ngOnInit() 
    this.store.select(data).pipe(
      map(data =>  this.data = this.transformData(data); )
    ).subscribe();
  

  transformData(data) 
    // data is an array of data
    // notice 'of()'
    return of(data.map(item => item));
  

为了澄清，我在console.log中确实看到this.data的值发生了变化，但是html并未呈现数据

答案

为了使用async，可以将Observable或Promise传递到*ngFor。因此，您需要将this.store.select的返回值分配给data，而不使用subscribe：

class Component 
  data: Observable<any>;

  ngOnInit() 
    this.data = this.store.select(data).pipe(
      map(result =>  return this.transformData(result); )
    );
  

  transformData(data) 
    // data is an array of data
    return data.map(item => item);
  

如果您不对transformData方法进行任何修改，则可以删除pipe。

class Component 
      data: Observable<any>;

      ngOnInit() 
        this.data = this.store.select(data);
      

 

另一答案

不太确定您在transformData方法中正在做什么。实际上，您实际上返回的是相同的data。

尽管尝试一下：

class Component 
  data$: Observable<any[]>;

  ngOnInit() 
    this.data$ = this.store.select(data).pipe(
      map(data => this.transformData(data))
    );
  

  transformData(data) 
    return data.map(item => item);
  

然后在您的模板中：

<div *ngFor="let item of data$ | async">
   item.prop1   item.prop2 
</div>

另一答案

您可以这样使用。

class Component 
  data = [];

  ngOnInit() 
    this.store.select(data).pipe(
      map(data => this.transformData(data))
    ).subscribe(result=>  this.data =result);
  

  transformData(data) 
    // data is an array of data
    return data.map(item => item);
  

另一答案

如果您确定错误不在service之内。

然后也许您可以尝试这样的事情：

class Component 
  private data = Observable<Array<any>>;

  public ngOnInit() 
    this.store.select(data).pipe(
      map(data =>  this.data = this.transformData(data); )
    );
  

  private transformData(data): Observable<any> 
    // data is an array of data
    // notice 'of()'
    return of(data.map(item => item));
  

HTML：

<div *ngFor="let item of data | async">
    item.prop
</div>

由于无法看到您的服务，我必须假设 ...

我建议您在这里使用Promise，因为我发现它们在寻求异步的情况下更容易使用。另外，不要在这里通过管道，而要在您的服务中这样做。这样，您只需要将原始数据吐出到HTML视图中，就不需要在控制器中进行任何转换，并且这样您就知道您有数据（因为您可以在较早的阶段从服务而不是控制器中获取数据） ）。