角度 - 布尔值在模板中不起作用

Question

我在数据绑定和将数据从父组件传递到子组件时遇到问题。有一个值"active"应该是布尔值，我想根据这个值更改按钮的类。因此，有一个父组件将true/false传递给子组件，我甚至可以正确地打印出这个值(例如，在

标记中(，但每当涉及到像"active==true"这样的检查时，它总是给出一个答案，无论active是什么变量。有人能帮我吗

父组件.html:

<div class="box">
<div class="columns is-mobile is-centered is-multiline" >
<div class="column is-half-mobile is-4-tablet" *ngFor = 'let name of names; let i = index' >
<app-controler [ingredientName]='name' active="{{newNames[name]}}"></app-controler>
</div>
</div>
</div>

父组件.ts:

export class ControlsComponent implements OnInit {
ingredients:Pizza
names = ['tomatoes', 'onions', 'cheese', 'peppers', 'beans', 'corn']
newNames = {}
constructor(private foodService:FoodService) { }
ngOnInit(): void {
this.ingredients = this.foodService.getIngredients('pizza');
for (let name of this.names){
if (this.ingredients[name] == 0){
this.newNames[name] = false
} else {
this.newNames[name] = true
}

}
}}

子组件.html:

<button class="button" [ngClass]='{"is-success": active===false }' (click)='ingredientOnClick(ingredientName)'>
{{ingredientName}} {{active ? 'yes' : 'no'}}
</button>

此检查｛｛active？'yes':'no'｝｝也显示错误的输出

子组件.ts:

export class ControlerComponent {
@Input() ingredientName:string
@Input() active = false
}

Answer 1

而不是像下面这样将值传递给子组件active="{｛newNames[名称]｝｝"；，do[active]='newNames[name]