Блог

У меня проблема с привязкой данных и передачей данных от родительского компонента к дочернему. Существует это значение ‘active’, которое должно быть логическим, и я хотел бы изменить класс кнопки в зависимости от этого значения. Итак, есть этот родительский компонент, который передает true / false дочернему элементу, чем я могу даже правильно распечатать это значение (например, в

теги) но всякий раз, когда дело доходит до проверки типа ‘active == true’, она всегда дает один ответ, независимо от того, какая переменная активна. Кто-нибудь может мне помочь? =)

Родительский компонент .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’}} также показывает неверный вывод

Дочерний компонент .ts:

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

}
 

Вместо того, чтобы передавать значение дочернему компоненту, например, active=»{{Новые имена [имя]}}», сделайте [active]=’Новые имена [имя]