Генератор событий: шаблон не реагирует на отправленное событие

Question

У меня есть дочерний компонент, который отправляет событие как таковое

@Output() setAdditionalCodeValue: EventEmitter<any> = new EventEmitter();

И HTML равен

  <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-cell" (click)="setAdditionalCodeValue.emit(row)">
      </mat-row>

Мой родительский HTML затем связывается с setAdditionalCodeValue как таковым

<ng-container matColumnDef="additionalCode">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Code</th>
  <td mat-cell *matCellDef="let element" class="grandParent" >
    <mat-form-field class="type" let="i = index">
      <input matInput (keyup)="toggleLookup($event, element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)" [(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">
    </mat-form-field>
    <div *ngIf="element.expanded" class="parent">
      <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>
    </div>
  </td>
</ng-container>

И родительский компонент выглядит так:

  updateAdditionalCodeHandler(evt) {
console.log('Update Addition Code event received: ' + evt);
this.countryLookupInput = evt;

}

updateAdditionalCodeHandler не запускается, так как для начала ничего не записывается в консоль.

Моя конечная цель состоит в том, чтобы обновить свойство 'countryLookupInput' значением, полученным из параметра 'row' дочернего элемента.

Странно, но '(closeLookup)="closeLookupHandler(element)"', который подключен таким же образом, работает, пойди разберись!

Answer 1

Проблема в следующем элементе:

 <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>

Модифицированный код

<app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)" ></app-lookup-popup>

и другой компонент

<input matInput (keyup)="toggleLookup($event, element)"[(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">

Если это компонент, из которого происходит событие

Answer 2

Я думаю, что в вашем коде есть две проблемы, во-первых, вы обработали событие на input, а не на вашем дочернем компоненте

Я имею в виду здесь ->

  <input matInput (keyup)="toggleLookup($event, element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)"

Вместо здесь ->

  <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>

и вторая проблема заключается в том, что вам нужно использовать $event для доступа к излучаемому значению

поэтому приведенный ниже модифицированный код должен работать

<ng-container matColumnDef="additionalCode">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Code</th>
  <td mat-cell *matCellDef="let element" class="grandParent" >
    <mat-form-field class="type" let="i = index">
      <input matInput (keyup)="toggleLookup($event, element)"  [(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">
    </mat-form-field>
    <div *ngIf="element.expanded" class="parent">
      <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" 
 (setAdditionalCodeValue)="updateAdditionalCodeHandler($event)" ></app-lookup-popup>
    </div>
  </td>
</ng-container>