Angular - boolean 在模板中不起作用

Question

I have a problem with data binding and passing data from parent to child component. There is this value 'active' which should be boolean and I would like to change a class of a button depending on that value. So there is this parent component which passes true/false to the child, than I can even print out this value properly (eg in

tags) but whenever it comes to a check like 'active == true' it always gives one answer, no matter what variable active is. Can someone help me? =)

Parent component.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>

Parent component.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
      }
      
    }
}}

Child component.html:

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

this check {{active? 'yes': 'no'}} also shows wrong output

Child component.ts:

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

}

Answer 1

Instead of passing value to child component like this active="{{newNames[name]}}", do [active]='newNames[name]