Angular - boolean 在模板中不起作用

Question

我在數據綁定和將數據從父組件傳遞到子組件時遇到問題。 有這個值“活動”應該是 boolean，我想根據該值更改按鈕的 class。 所以有這個父組件將真/假傳遞給孩子，我什至可以正確打印出這個值（例如

標簽），但每當涉及到像“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>

這個檢查{{活動？ 'yes': 'no'}} 也顯示錯誤 output

子組件.ts：

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

}

Answer 1

不要將值傳遞給像這樣 active="{{newNames[name]}}" 的子組件，而是執行 [active]='newNames[name]