Переключатель тумблера Angular7 путем изменения текста - PullRequest
Новая
       9

Переключатель тумблера Angular7 путем изменения текста

0 голосов
/ 10 января 2019

У меня есть nz-переключатель, использующий ng.ant.design, и я использую API для получения динамических данных. я дал этот переключатель, и когда он включен, то текст будет активным, как только он выключен, то текст будет неактивным. Теперь, если включить, то все становятся активными, и как только он выключен, все неактивны. Как решить эту проблему

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>

Component.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);
      }
    );

Может кто-нибудь подсказать мне, как этого добиться, заранее спасибо.

...