Question

我想将我的角度2生命周期钩子与Observable同步。例如，在下面的场景中。

**Temp Component**

    @Component({
    selector: 'temp-component',
    template: `<table [tableData]='tableData'>
    </table >`
})

export class TempComponent implements OnInit{
private data;
private tabledata;
   ngOnInit {
       this.getData(Dataurl).subscribe(
                        (data3: any) => {
                            this.data = data3;
                        },
                        (err: any) => {
                            console.error(err);
                        },
                        () => {
                            this.tabledata = this.data;
                            console.log('In temp component..', this.tabledata);
                        }

   }

getData(url: string): Observable<any> {
        return this.http.get(url)
        .map((res: Response) => res.json())
        .catch((err: Response) => Observable.throw(err.json().error));
    }

}

**Table Component :**

@Component({
    selector: 'table',
    template: `code for displaying table`
})

export class TableComponent implements OnInit{
   @Input tableData: any;
   ngOnInit{
      console.log('table Data..' , this.tableData);
   }
}


**Output :**
table Data.. undefined
In temp component.. (Displaying table data info)

在上面的场景中，我希望表数据与临时组件中的显示相同。任何人都可以知道如何在observable完成后让表格显示出来。

Answer 1

你需要使用ngOnChange钩子，Angular在组件的输入值改变时调用这个方法。我的意思是：

.....
export class TableComponent implements OnChanges {
@Input() tableData:any;
ngOnChanges(changes:SimplesChanges){
      if(changes['tableData']){
           console.log(this.tableData);
      }
}

希望可以帮助!!!

Answer 2

您的代码没有任何问题，除非您实际上没有显示数据，并且您从控制台日志告诉您的内容中得出了错误的想法，就像Nour在评论中注意到的那样。

如果您使用setter将输入变量设为属性，则可以看到这一点。

@Component({
  selector: 'table',
  template: `<code>{{ tableData | json }}</code>`
})
export class TableComponent implements OnInit{
  @Input() public set tableData(value: any) {
    console.log('table data updated: ', value);
    this._tableData = value;
  }

  public get tableData() {
    return this._tableData;
  }
  private _tableData: any;

  ngOnInit{
    console.log('table Data..' , this.tableData);
  }
}

您现在应该看到

了

table Data..undefined

和以前一样，接着是

表数据已更新：{}

更新值时的

文本。尝试在模板中显示数据，例如使用

<code>{{ tableData | json ]]</code>

在您的视图中也会看到更新值。另外，请不要忘记绑定到的值应该是public，以便在您感兴趣的功能中进行Aot-compiling工作。

如何同步角度2或4生命周期钩子和可观察量

2 个答案: