Блог

если нажать на «iPhone», он станет синего цвета

и может быть переключена. используйте this.betState[selectId] = !this.betState[selectId];

и нажмите «Удалить», также можно отменить синий цвет «iPhone»

Теперь проблема в том, что «удалить» не работает.

Я думаю, это потому, что del () получает неправильную переменную (this.betState)

но betThis() может получить правильную переменную. так что toogle — это работа.

Как это исправить?

почему del() не может получить нужную переменную?

bet.ts

   betState = {};


  betThis(selectId){
    this.betState[selectId] = !this.betState[selectId];
    console.log(this.betState)
  }

  del(id){
    this.betState[id] = false
    console.log(this.betState)
  }
  

bet.html

   <div (click)="del('o123')">delete</div>
  

cs.html

 <ng-container *ngFor="let list of test">
  <div class="a" (click)="betComponent.betThis(list.test1.qq2[0])" [class.blue]="betComponent.betState[list.test1.qq2[0]]">
        {{list.test1.qq2[1]}}
    </div>
</ng-container>

<app-bet></app-bet>
  

app.compontent.html

 <app-cs [test]="test" [betState]="betComponent.betState"></app-cs>
  

данные

  test = [
    {
      "test1": {
            "qq2": ["o123", "iPhone"],
          },
    }
  ]
  

демонстрация:https://stackblitz.com/edit/angular-zxlqqj?file=src/app/app.component.ts

Используйте дочерний компонент (bet.component) для связи с родительским компонентом (cs.component) с помощью декоратора @Output.

В cs.component.html используйте директиву *ngIf для удаления «iPhone». Это можно обработать, объявив переменную, которая скрывает ‘iPhone’, нажав на ‘delete’, которая далее обрабатывается с помощью @Output.