代码之家 › 专栏 › 技术社区 › prabhat gundepalli

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

angular6 parent-child observable typescript angular

prabhat gundepalli · 技术社区 · 8 年前

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

下面是我的父组件 //父组件.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 )

在击中 恩戈尼尼特 在子级,然后在父级, msgTypeList 已填充(异步调用已完成),但 现在可用的数据不会发送给子级 .

我必须转换成 可观测的 获取更新的数据,或者有其他方法。

1 回复 | 直到 8 年前

Thierry Falvo 8 年前

抱歉,我不太理解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);
}

推荐文章

Alopex · 如何从子进程到父进程获取返回值?

8 年前

Celso Cruz · react native:创建组件,如</组>

8 年前

xxCodexx · 在Python中从父函数启动进程

8 年前

quantummidget · 正在查找BFS父关系数组

8 年前

funcs · 无限循环中来自子级的read()标准输出

8 年前

Harish Kumar · angular js:单击products list build内数量增加和减少按钮的事件,ng repeat反映每个列表数量编号

8 年前

BBauer42 · 将平面数据加载到树数据结构中

8 年前

user7684436 · ReactJS:这个。道具。toggleModal不是一个函数

8 年前

KLD · 从子VC设置父VC对象的动画

8 年前

James Stone · 出现在父级后面的HTML子级

8 年前