将 Angular 2 个 Observable 转化为一个 non observable

Question

我正在使用无法绑定到可观察集合的 6.3 版 NGX 数据 Table。如何将 Angular 可观察集合转换为常规不可观察数组？

这是我的服务：

private _productUrl = '../../api/todos/todos.json';

constructor(private _http: Http) { }

getToDos(): Observable<IToDo[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IToDo[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

这是我对 component.ts 的了解。它在 foreach 循环中给我一个错误：Cannot read 属性 'length' of undefined

ngOnInit() {
    this._toDoService.getToDos()
        .subscribe(
          toDos => this.toDos = toDos,
          error => this.errorMessage = <any>error);

    this.rows = this.transform(this.toDos);
}

transform(source: IToDo[]): IToDo[] {
    let dest: IToDo[] = [];

    for (let sourceItem of source)
    {
      let destItem: IToDo = {
        toDoId: sourceItem.toDoId,
        name: sourceItem.name,
        priority: sourceItem.priority,
        dueDate: sourceItem.dueDate,
        completed: sourceItem.completed
      };
      dest.push(destItem);
    }

    return dest;
}

Answer 1

Observables 可以是异步的，因此您不能简单地在调用订阅后立即操作待办事项。相反，在订阅内操作待办事项：

ngOnInit() {
  this._toDoService.getToDos()
    .subscribe(
      toDos => {
        this.toDos = toDos
        this.rows = this.transform(this.toDos);
      },
      error => this.errorMessage = <any>error);
}

您的 this.transform 调用是同步调用的，这意味着您的调用堆栈只是调用的线性进展。

Answer 2

您还可以使用 async 管道解包输入 Observable。

 <ngx-datatable
        class="material"
        [rows]="todos | async"
        ......
 </ngx-datatable>

将 Angular 2 个 Observable 转化为一个 non observable

Transform Angular 2 Observable Into a non observable

ngx-datatable

angular