当数据可用时，Angular2 组件不会更新

Question

我有一个组件，其属性绑定到数据属性。

@Component({
 encapsulation: ViewEncapsulation.None,
 selector: 'animal-detail-main',
 styleUrls: ['animal-detail-main.component.scss'],
 template: `
      <div>
        {{data | json}}
      </div>
      `
})

export class DetailMain  {
  data: any;

 private dataSvc: MainService;

 constructor( 
    @Inject(MainService)  dataSvc: MainService,
    ) {
      this.dataSvc = dataSvc;
    }

  ngOnInit() {
        var fetchedData: any;

        this.dataSvc.currentID$
           .subscribe(
              currentID => {
                   currentID = currentID;
                   this.dataSvc
                     .getDetail(currentID)
                     .map(response => response.json())
                     .subscribe (
                         data => {fetchedData = data[0]},
                          err => console.log('Error',err),
                          () => {
                          console.log('fetchedData',fetchedData);
                          setTimeout(() => {
                             this.data = fetchedData;
                             console.log("this.data",this.data);
                          }, 2000);
                    }
           );
      });   
 }
}

基本上 currentID$ 服务持有当前对象的 ID，因此它被取回 currentID，然后 currentID 被传递到 getDetail 服务以 return 该 ID 的整个对象。

如果没有 setTimeout，函数 return 会延迟对象数据，并且它永远不会分配给 this.data。

使用 setTimeout，在 this.data 之后的 console.log 被分配 fetchData returned 对象正确记录 returned 对象，但视图永远不会更新数据未显示在组件中。

我原以为组件会在数据可用后自动神奇地刷新，但事实并非如此，而且我不知道如何触发视图更新。

Answer 1

我认为您可能想在此处使用 flatMap 来链接请求，因为第二个请求依赖于您服务中的 Observable。编辑。如果你的 id 是 BehaviorSubject.

constructor(private dataSvc: MainService) { }

data: any = {}; // if it's an object

ngOnInit() {
   this.dataSvc.currentID$
     .flatMap(currentId => this.dataSvc.getDetail(currentId))
        .map(res => res.json()) // could do the mapping in the service
        .subscribe(data => {
           this.data = data[0];
        });
}

关于视图不更新，对此不能完全确定....尝试上述解决方案，如果模板未更新，您可以尝试使用 ChangeDetectorRef 手动触发更改检测，但是我真的不明白为什么不会发生变化检测。但这些事情似乎有时会发生:)

当数据可用时，Angular2 组件不会更新

Angular2 component doesn't update when data becomes available

angular2-services

angular2-components

angular2-observables

angular