代码之家 › 专栏 › 技术社区 › Abdul Ahmad

如何在angular中循环异步数据

ngfor angular

0

Abdul Ahmad · 技术社区 · 7 年前

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

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>

我不知道为什么会发生这种情况-我习惯于在传递道具或更新状态和组件重新渲染时做出反应,在angular中的工作流是什么?

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

this.data 在I console.log时更改,但html不呈现数据

4 回复 | 直到 7 年前

1

Harun Yilmaz 7 年前

为了使用 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);
      }

 }

2

0

SiddAjmera 7 年前

我不太清楚你在做什么 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>

3

0

Joel 6 年前

如果您确信错误不在您的范围内 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>

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

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

4

0

Thomas Leo Blok Ved_Code_it 6 年前

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