Функция не может получить нужную переменную

если щелкнуть «iPhone», цвет станет синим

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

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

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

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

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

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

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

ставка.тс

  betState = {};


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

  del(id){
    this.betState[id] = false
    console.info(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>

приложение.компонент.html

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

данные

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

демо: https://stackblitz.com/edit/angular-zxlqqj?file=src%2Fapp%2Fapp.component.ts