子组件的 Angular2 异步问题

SBB 发表于 Dev

SBB

我有一个从数据库加载数据的父组件。这些数据来自我的服务，它返回一个承诺。

成分：

ngOnInit() {
    this._massEmpService.fetchFilterFields()
        .then(results => {
            this.fields = {
                areas: results['areas']['options'],
                silos: results['silos']['options'],
                departments: results['departments']['options'],
                locations: results['locations']['options'],
                segments: results['segments']['options'],
                roles: results['roles']['options']
            };
        });
}

服务：

fetchFilterFields() {
    return new Promise((resolve, reject) => {
        this._http.get(this.baseUrl + '/fetchImportFields', { "headers": this.headers })
            .map((result: Response) => result.json())
            .subscribe((results) => resolve(results.data));
    });
};

我试图将我的this.fields数据传递给子组件，但是当我尝试使用子组件中的数据时，它似乎无法访问它。

子组件：

@Input() fields: any;

ngAfterViewInit() {
    console.log(this.fields); // No data
}

父 HTML：

<app-import [fields]="fields"></app-import>

我相信这是一个异步问题，但我认为使用afterViewInit可能已经解决了它。有什么想法吗？

他停下来了

我的建议是使用共享服务，Subject并Observable让孩子组件变量可以subscribe到数据流。

数据绑定的方式，子组件是和父组件一起加载的，所以当Promise返回数据时，子组件是不知道的，因此需要重新初始化才能获取数据。Observable并subscription消除了这个问题。

我创建了这个Plunker 演示，它将承诺数据返回给子组件（增加了额外的 2000 毫秒延迟）。如果它适合您，您可以轻松地在代码中实现它:)

parent.component.ts：

constructor(private appState: AppState){ }

  ngOnInit(){
    this.getData();
  }

  getData(): void {
    this.appState
        .fetchFilterFields()
        .then(data => {
          // console.log(data)
          this.appState.setData(data);
        });
}

服务.ts：

  private headers = new Headers({'Content-Type': 'application/json'});
  private apiUrl = 'api/data';

  // Observable string source
  private dataStringSource = new Subject<string>();

  // Observable string stream
  dataString$ = this.dataStringSource.asObservable();

  constructor(private http: Http) { }

  public setData(value) {
    this.dataStringSource.next(value);
  }

  fetchFilterFields() {
    console.log(this.apiUrl);
    return this.http.get(this.apiUrl)
               .delay(2000)
               .toPromise()
               .then(response => response.json().data)
               .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

child.component.ts:

fields: any;

constructor(private appState: AppState){
    // this.mylist = this.appState.get('mylist');

    this.appState.dataString$.subscribe(
      data => {
        // console.log("Subs to child" + data);
        this.fields = data; 
      });

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。