如何在angular中循环异步数据

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

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);
  }
}

上面是我正在做的一个简化版本，转换方法做的更多，但它是无关的

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

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

---

为了澄清，我确实看到了

this.data的值在我console.log时发生了变化，但是html没有呈现数据为了使用
async
，您可以将
observeable
或
Promise
传递给
*ngFor
。因此，您需要分配
this.store的返回值。选择
到
数据
而不选择
订阅
：

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
方法中正在做什么。实际上，您返回的是与原样相同的
数据

尽管如此，请尝试以下方法：

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);
  }
}

类组件{
数据$：可观察；
恩戈尼尼特（）{
this.data$=this.store.select（data）.pipe(
映射（数据=>this.transformData（数据））
);
}
转换数据（数据）{
返回data.map（item=>item）；
}
}

然后在模板中：

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


{{item.prop1}}{{item.prop2}}
如果您确定错误不在您的
服务范围内

那么也许你可以试试这样的东西：

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));
  }
}

类组件{
私人数据=可观察；
公共ngOnInit（）{
this.store.select（数据）.pipe(
映射（数据=>{this.data=this.transformData（数据）；}）
);
}
私有数据（data）：可观察{
//数据是一组数据
//注意“of（）”
返回（data.map（item=>item））；
}
}

HTML:


{{item.prop}}

因为我看不出你的服务是什么样子，我不得不假设

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

类组件{
数据=[]；
恩戈尼尼特（）{
this.store.select（数据）.pipe(
映射（数据=>this.transformData（数据））
).subscribe（结果=>{this.data=result}）；
}
转换数据（数据）{
//数据是一组数据
返回data.map（item=>item）；
}
}
在我尝试帮助您之前：请发布所有相关代码，什么是
存储
？。另外，为什么您的
组件不实现
OnInit
。否则不会调用OnInit方法。如果不打算使用ngOnInit的生命周期事件，请使用构造函数（）{}调用函数。代码非常简单，我删除了与问题无关的所有内容。这家商店是一个redux商店。。。您没有在组件中显式实现OnInit这一事实可能是导致这种行为的错误。我正在实现它，但它已从中删除，因为这不是问题所在is@Joel无论是否实现OnInit
，Angular都将调用该方法（如果存在）<相反，code>Angular检查指令和组件类，如果定义了钩子方法，则调用它们。Angular查找并调用像ngOnInit（）这样的方法，不管有没有接口。
这里是官方文档：transformData被简化了，因为它不是问题的焦点
<div *ngFor="let item of data$ | async">
  {{ item.prop1 }} {{ item.prop2 }}
</div>

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));
  }
}

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