Невозможно использовать дочернее входное значение в логике родителя [ngClass]

Question

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

Я могу фактически передать значениекажется, что я установил console.log для перехвата того, что сначала испускается дочерним компонентом, а затем и того, что перехвачено родителем, но я просто не могу сделать так, чтобы моя логика [ngClass] видела этоsection ...

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

parent.component.ts

  rowId: number;

  childToParent(val){
    console.log('received from child: ' + val);
    this.rowId = val;
  }

parent.component.html

<app-child (childToParent)="childToParent($event)"></app-child>
<li *ngFor="let item of items" attr.id="item-{{item.id}}" [ngClass]="{'active': item.id === rowId}">
  <div class="item">
   ...
</li>

child.component.ts

@Output() childToParent = new EventEmitter<String>();

  sendToParent(id){
    console.log('sending to parent: ' + id)

    this.childToParent.emit(id);
  }

child.component.html

<input [(ngModel)]="val" (input)="sendToParent(val)"/>

Stackblitz

Answer 1

Вы уверены, что item.id и rowId имеют тип числа?Вы можете изменить "===" на "==", и это будет работать как для строки, так и для числа.

Answer 2

Может быть просто parseInt val

this.rowId = parseInt(val, 10);