Question

如果点击“ 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>

数据

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

演示：https://stackblitz.com/edit/angular-zxlqqj?file=src%2Fapp%2Fapp.component.ts

Answer 1

使用@Output装饰器将子组件（bet.component）与父组件（cs.component）通信。

在cs.component.html中，使用* ngIf指令删除“ iPhone”。这可以通过声明一个变量来解决，该变量可以通过单击“删除”来隐藏“ iPhone”，然后使用@Output进行进一步处理。

函数无法获取正确的变量

1 个答案: