Компонент ViewChild не определен при попытке вызвать метод - PullRequest
Новая
       10

Компонент ViewChild не определен при попытке вызвать метод

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

Я получаю данные из БД, и данные готовы. Я пытаюсь привязать дочерний элемент с помощью ViewChild, чтобы передать данные obj дочернему элементу

Проблема в том, что компонент не «готов», поэтому я установил тайм-аут на 2 секунды.

Это не правильно. Как узнать, готов ли дочерний компонент.

Родительский компонент извлекает данные из БД 

 @ViewChild("assumps") assumps: AssumptionsComponent
 getProposalAmounts() {
    this.targets.getProposalAmounts().subscribe((data) => {
    this.assumptions = data.assumptions;

    setTimeout(() => {
      this.assumps.setAssumptionsForm(this.assumptions);
    }, 2000)

Внутри дочернего компонента 

setAssumptionsForm(obj: Assumptions) {
if (obj != null) {
  this.assumptionsObj = obj;
}

без тайм-аута ребенок в нуле; Ошибка чтения Cannot read property 'setAssumptionsForm' of undefined

Спасибо

Ответы [ 2 ]

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

Похоже, вы ожидаете визуализировать шаблон assumps, как только вы назначите this.assumptions значение, и ожидаете мгновенного отображения этого DOM. Но так не бывает. Поправь меня, если мои предположения неверны.

Скорее вы можете подумать о создании QueryList (особая наблюдаемая) из AssumptionsComponent, когда вы сделали ViewChild запрос. А позже вы можете следить за QueryList Observable changes свойство. После этого вы можете напрямую получать изменения (удаление и добавление DOM), происходящие через #assumps переменную шаблона. 

@ViewChild("assumps") assumps: QueryList<AssumptionsComponent>;


getProposalAmounts() {
    this.targets.getProposalAmounts().subscribe((data) => {
    this.assumptions = data.assumptions;
}

ngOnInit () {
    this.assumps.changes((list) => {
        list.forEach(assump => 
          assump.setAssumptionsForm(this.assumptions)
        )
    })        
}
0 голосов
/ 13 сентября 2018

Вы можете создать сервис для своего компонента и подписаться на него. Когда ваш дочерний конструктор выполняется, вы отправляете событие для вашего сервиса, сообщая родителю, что он готов.

Мне кажется, это лучшее решение.

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

Я на самом деле предпочитаю первый, так как это более повторно используемый подход:)

...