2

我有一个使用 ng.ant.design 的 nz-switch，并且正在使用 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>

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

任何人都可以建议我如何实现这一点，在此先感谢。

4

0 回答 0