Данные дочернего компонента не обновляются из родительского компонента - PullRequest
Новая
       11

Данные дочернего компонента не обновляются из родительского компонента

0 голосов
/ 12 сентября 2018

Я пытаюсь отправить список от родительского к дочернему компоненту, чтобы привязать его к автозаполнению мата.

Ниже мой родительский компонент //parentcomponent.html

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

В моем родительском компоненте ts file 

//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 заполняется (асинхронный вызов завершен), но , что доступные данные сейчас не отправляются дочернему .

Нужно ли преобразовывать в наблюдаемый для получения обновленных данных или есть какой-либо другой способ.

1 Ответ

0 голосов
/ 13 сентября 2018

Извините, я не совсем понимаю цель кода внутри ngOnInit.

Вызывающие селекторы должны вернуть Observable. Тогда вам просто нужно передать наблюдаемый с pipe в ваш компонент.

Так что, пожалуйста, не могли бы вы попробовать это, если это может помочь вам. Вот что это может быть (после вашего кода): 

//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);
}
...