Не удается прочитать свойство "target" при передаче значения от дочернего к родительскому компоненту

Question

В моем проекте student является дочерним компонентом родительского компонента app.

Компонент student template имеет следующий элемент ввода:

<input type='text' #inputbox (keyup)='onkeyUp(inputbox.value)'>

Компонент student определил обработчик события onkeyUp, как показано ниже:

  @Component({
  outputs: ['childevent']
  ... 
  childevent = new EventEmitter();
  onkeyUp(value: any) {
  this.childevent.emit(value);
  }

Родительский компонент app выглядит следующим образом:

...
<label>Value of Child Component: </label> {{Cdata.target.value}}
<app-student (childevent)='Cdata=$event'></app-student>

Здесь {{Cdata.target.value}} выбрасывает ошибка:

ERROR TypeError: Cannot read property 'target' of undefined

Насколько я понимаю, $event имеет всю полезную нагрузку childevent, которая передается обработчику событий Cdata. И, event.target.value возвращает текущее содержание childevent

Пожалуйста, дайте мне знать, если у меня есть правильное понимание. Я имею в виду angular документы

Я пытался использовать optional chaining

<label>Value of Child Component: </label> {{Cdata?.target.value}}

, но все равно получаю ошибку

ERROR TypeError: Cannot read property 'value' of undefined

Answer 1

Я думаю, вам просто нужно изменить определение EventEmitter, вы можете проверить :

@Output() childevent = new EventEmitter();

Answer 2

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

<label>Value of Child Component: </label> {{ Cdata ? Cdata.target.value : 'missing' }}