不能在父级的 [ngClass] 逻辑中使用子级输入值
Cannot use child input value in parent's [ngClass] logic
我正在尝试将用户输入值从我的 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)"/>
也许只是 parseInt val
this.rowId = parseInt(val, 10);
你确定item.id和rowId都是数字类型吗?您可以将“===”更改为“==”,它适用于字符串和数字。
我正在尝试将用户输入值从我的 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)"/>
也许只是 parseInt val
this.rowId = parseInt(val, 10);
你确定item.id和rowId都是数字类型吗?您可以将“===”更改为“==”,它适用于字符串和数字。