angular - Bind <mat slide toggle> ved å bruke [(ngModel)] med en strengverdi i HTML

Jeg har en material slide-bryter og den er toveis bundet til en strengvariabel som har verdien "true" eller "false" ved bruk av [(ngModel)]. Bryteren oppdaterer verdien av variabelen korrekt når jeg vipper den, men første gang den lastes inn i DOM, viser den alltid sin tilstand som true selv om verdien i variabelen er "false".

<div *ngIf="agent.attributes[i].type == 'Boolean'">
  <mat-slide-toggle [checked]="agent.attributes[i].value == 'true' ? true : false" 
                  [(ngModel)]="agent.attributes[i].value">{{agent.attributes[i].value}}</mat-slide-toggle>
                </div>

dette er resultatet

Svar #1

du binder en strengverdi til ngModel som trenger å være boolsk for sjekk, så endre det til:

<div>
  <mat-slide-toggle 
      [checked]="agent.attributes[i].value === 'true' ? true : false"
      (change)="setValue( i , $event )">
      {{agent.attributes[i].value}}
  </mat-slide-toggle>
</div>

ts-kode:

setValue(i , e){
    if(e.checked){
        this.agent.attributes[i].value = 'true'
   }else{
        this.agent.attributes[i].value = 'false'
   }
}

DEMO

Relaterte artikler