子组件数据未从父组件更新

Question

我正在尝试从父组件发送一个列表到子组件，以将其绑定到垫自动完成。

下面是我的父组件//parentcomponent.html

<mat-card style="margin: 1px;">
  <search-form [(messageTypeList)]="messageTypeList" [rowData]="rowData | async">
  </search-form>
</mat-card>

在我的父组件ts文件中

//parentcomponent.ts

messageTypeList: Messagetype[] = [];

ngOnInit() {
const messageTypeList = this.store.select(fromStore.getMessageTypeListData);
messageTypeList.pipe(takeUntil(this.unsubscribe$)).subscribe(msgTypeList => {
  if (msgTypeList.length > 0) {
    for (var i = 0; i < msgTypeList.length; i++) {
      this.messageTypeList.push(msgTypeList[i]); // this messageTypeList is send to child component
    }
  }
  else {
    this.store.dispatch(new fromStore.GetMessageTypeList({}));
  }
})

下面是我的孩子组件

 //childcomponent.ts
 @Input() messageTypeList: Messagetype[];

ngOnInit() {
 console.log('messagetypelist='+this.messageTypeList); // getting data as []
}

初始化父级后，初始化子级，但异步ngrx调用仍未完成，因此子级中不存在数据（在ngOnInit中）

在点击ngOnInitin子项后，然后在父项中，填充msgTypeList（异步调用已完成），但现在可用的数据不会发送给子项。

我是否必须转换为observable以获取更新的数据，或者还有其他方法。

Answer 1

对不起，我真的不明白ngOnInit里面代码的目标。

调用选择器应该返回Observable。然后你只需要将带有管道的observable传递给你的组件。

如果可以帮到你的话，请你试试这个。这是它可以是什么（遵循您的代码）：

//parentcomponent.html

<mat-card style="margin: 1px;">
  <search-form [messageTypeList]="messageTypeList$ | async" [rowData]="rowData | async">
  </search-form>
</mat-card>

父组件TS文件

//parentcomponent.ts

messageTypeList$: Observable<Messagetype[]>;

ngOnInit() {
  this.messageTypeList$ = this.store.select(fromStore.getMessageTypeListData);

  // only if you need to load data into store before...
  this.store.dispatch(new fromStore.LoadMessageType({}));
})

儿童组件

//childcomponent.ts
@Input() messageTypeList: Messagetype[];

ngOnInit() {
 console.log('messagetypelist=', this.messageTypeList);
}