Отображать флажок только один раз, а не несколько раз

Question

У меня есть цикл NgFor, чтобы создать отдельную карточку на вкладке заголовков, а затем перебрать элементы и поместить информацию в соответствующие типы карточек. Если есть новый тип данных, я создаю новый заголовок и помещаю информацию в эту вкладку.

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, однако если я напишу код, я получу несколько флажков для каждого адреса и получу один флажок. Однако, если я хочу один флажок. Как мне этого добиться. Использовал индекс, чтобы показать флажок только в первой строке, но как мне сделать это здесь?

Вместо нескольких флажков для каждой строки, я просто хочу один флажок в первой строке.

Answer 1

У вас есть проверочный индекс цикла, я просто обновляю ваш код, надеюсь, он вам поможет.Спасибо

<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>

Answer 2

Поместите тег mat-checkbox вне тегов * ngFor под тегом выхода mat-tab и используйте css для этого тега, например. float: right