typescript - Interruptor de alternancia en Angular7 cambiando texto
Tengo un nz-switch usando ng.ant.design y estoy utilizando la API para obtener datos dinámicos. He dado este interruptor y cuando está ENCENDIDO, el texto será Activo, y una vez que está APAGADO, el texto será Inactivo. Ahora, si se enciende, todos se activan y una vez que está apagado, todos están inactivos. ¿Cómo solucionar esto?
HTML :
<div nz-row [nzGutter]="8" class="mt-20" *ngIf="users">
<div nz-col [nzSpan]="6" *ngFor="let user of users.data" >
<nz-card class="text-center" [nzCover]="coverTemplate" >
<nz-card-meta ></nz-card-meta>
<div class="text-left" routerLink="detail" style="outline:none">
<p class="mbtm-10 head-font">{{ user.first_name }} {{ user.title }}</p>
<p>Provides access of full site of capabilities, including administration and settings</p>
</div>
<!-- <div class="text-right"><strong>{{status}} </strong><nz-switch nzSize="small" [ngModel]="active" (click)="toggle()"></nz-switch></div> -->
<div class="text-right" *ngIf="active; else inactive"><strong>Active </strong><nz-switch nzSize="small" [(ngModel)]="active" ></nz-switch></div>
</nz-card>
<ng-template #inactive>
<div class="text-right"><strong>InActive</strong><nz-switch nzSize="small" [(ngModel)]="active" ></nz-switch></div>
</ng-template>
<ng-template #coverTemplate >
<p class="sub-card">{{user.id}}</p>
</ng-template>
</div>
</div>
Componente.ts:
public status : any = 'Active';
public active:boolean = true;
users: Object;
constructor(private setup: SetupService) { }
ngOnInit() {
this.setup.getUsers().subscribe(setup => {
this.users = setup
console.log(this.users);
}
);
¿Alguien puede sugerirme cómo lograr esto? Gracias de antemano.