Function can't get the right variable

Question

if "iPhone" be clicked, will turn blue color

and can be toggle. use this.betState[selectId] = !this.betState[selectId];

and click "delete" also can cancel the blue color of "iPhone"

Now the problem is "delete" is not working.

I think is because del() get the wrong variable(this.betState)

but betThis() can get the right variable. so toogle is work.

How to fix it?

why del() cannot get the right variable?

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"],
          },
    }
  ]

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

solanki... solanki... · Accepted Answer · 2019-04-10T06:13:16

Use child component (bet.component) to parent component (cs.component) communication using @Output decorator.

In cs.component.html , use *ngIf directive to delete the 'iPhone'. This can be handled by declaring a variable which hide 'iPhone' via clicking on 'delete' which is further handled using @Output.

Function can't get the right variable

1 Answers