只显示一次复选框而不是多次答案

【问题标题】：Display a checkbox only once instead of multiple times只显示一次复选框而不是多次
【发布时间】：2019-04-01 21:13:39
【问题描述】：

我有一个 NgFor 循环来在标题选项卡中创建 Distinct Card，然后遍历元素并将信息放入相应的卡片类型中。如果有新类型的数据，我会创建一个新标题并将信息放在该选项卡中。

HTML 代码：

          <mat-tab-group>
          <mat-tab *ngFor="let address of distinctAdressType" label="{{ address }}">
          <div *ngFor="let element of sampleData.address">
          <div *ngIf="address.toString() === element.addressType">
          <mat-label>
          <span>Address: {{ element.addressLine1 + ' ' + element.addressLine2 + ' ' + element.addressLine3 }}</span>
          </mat-label>
          <br />
          <mat-label> City: {{ element.city }}</mat-label> <br />
          <br />
          </div>
          </div>
          </mat-tab>
          </mat-tab-group>

我想显示一个 mat-checkbox，但是如果我编写代码，那么我会为每个地址获得多个复选框，我会得到一个复选框。但是我想要一个复选框。我该如何实现。在 mat-table 中我可以拥有使用索引仅在第一行显示复选框，但我该怎么做呢？

我只希望第一行有一个复选框，而不是每行有多个复选框。

【问题讨论】：

标签： angular html typescript

【解决方案1】：

将 mat-checkbox 标签放在 mat-tab 退出标签下的 *ngFor 标签之外，并在该标签上使用 css，例如float: right

【讨论】：

【解决方案2】：

您已检查循环索引，我只是更新您的代码，希望对您有所帮助。谢谢

<mat-tab-group>
   <mat-tab *ngFor="let address of distinctAdressType" label="{{ address }}">
      <div *ngFor="let element of sampleData.address; let i = index">
        <md-checkbox *ngIf="i == 0">Checkbox Text</md-checkbox>
        <div *ngIf="address.toString() === element.addressType">
          <mat-label>
            <span>Address: {{ element.addressLine1 + ' ' + element.addressLine2 + ' ' + element.addressLine3 }}</span>
          </mat-label>
          <br />
          <mat-label> City: {{ element.city }}</mat-label> <br />
          <br />
       </div>
    </div>
  </mat-tab>
</mat-tab-group>

【讨论】：