Question

我试图将用户输入的值从我的input传递给父对象，并使用该值来确定要在我的<li *ngFor...元素中突出显示哪一行。

实际上，我可以成功地传递值，因此，似乎已经设置了console.log来捕获子组件首先发出的内容，然后再捕获父组件发出的内容，但是我只是不能让它在我的[ngClass]逻辑部分中可见...

如果我对要突出显示的行的值进行硬编码，则该逻辑可以正常工作，但是，当然，我想以编程方式进行此操作。

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);

无法在父级的[ngClass]逻辑中使用子级输入值

2 个答案: