function抓不到正确变量

Question

线上demo: https://stackblitz.com/edit/a...

当点击iPhone时，颜色会变蓝色

再点一次会变回黑色，这里使用this.betState[selectId] = !this.betState[selectId];

然后按删除 也可以把iPhone变成蓝色

现在问题就是 删除 没有用

我想是因为del()没有抓到正确的变量(this.betState)

但是betThis()却抓的到 很奇怪

困扰很久了

有人可以帮忙一下吗 为什么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>

data

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

Answer 1

不得不说，你的代码很难理解。
直接给你答案：
cs.component.html

- <app-bet></app-bet>
+ <app-bet [bet]="betComponent"></app-bet>

bet.component.ts

  @Input() bet;
  del(id){
    this.bet.betState[id] = false
    console.log(this.betState)
  }

不理解再追问吧

Answer 2

感谢 千年虫 愿意看我的代码，原本的代码太复杂，这demo是极简化后的 所以很怪 哈哈

试了你的方法 真的管用，厉害了，

我的理解是这样 你利用父组件去传变量，

因为资料是由上传到下，子组件的变更，父组件不会知道，所以利用父组件加个[bet]="betComponent"，用父组件传子组件的变量给子组件 就正确了

这理解正确吗?

另外我昨天研读文件后好像想通了 有试出另一个解答

就是把betState变量改写在最上层的父组件，用父组件去向下传给所有需要的组件

然后子组件用@output通知父祖件变更 触发变更检测机制 再向下通知所有组件变更

不过你的方法还是高明许多

只能说文件真的要好好读 我这里会卡住，看来是因为对angular父子组件传递参数原理的不熟悉