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中）还没有数据

在孩子中击中ngOnInit之后，在父中，msgTypeList被填充（异步调用已完成），但现在没有将可用数据发送给孩子

我是否必须转换为可观察的才能获取更新的数据，或者还有其他任何方法。

Answer 1

对不起，我不太了解ngOnInit内部代码的目标。

调用选择器应返回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);
}

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

1 个答案: