Angular Mat表内的无限循环Mat芯片列表

我有一个自定义mat芯片列表组件，如下所示，并希望在mat表中使用它：

<mat-chip-list
  class="fv-stroke-chip"
  [ngClass]="{'mat-chip-list-stacked': ariaOrientation === 'vertical'}"
  (change)="onChange($event)"
  [multiple]="multiple"
  [selectable]="selectable"
>
  <mat-chip
    *ngFor="let chip of fvChips"
    [id]="chip.id"
    [selected]="chip.selected"
    [disabled]="chip.disabled"
    [disableRipple]="chip.disableRipple"
    [color]="chip.color"
    (click)="onChipClick(chip)"
  >
    {{chip.label}}
    <mat-icon *ngIf="chip.icon">{{chip.icon}}</mat-icon>
  </mat-chip>
</mat-chip-list>

<fv-stroke-chip [fvChips]="aListOfChip"  (chipClick)="handleChipClick($event)"></fv-stroke-chip>

<fv-stroke-chip [fvChips]="generateActivityButtons(activity)"  (chipClick)="handleChipClick($event)"></fv-stroke-chip>

  generateActivityButtons(planningActivity: PlanningActivity): ChipItem[] {
    const chipItems: ChipItem[] = [];
    console.log(planningActivity);
    const overdueInDays = this.getOverdueInDays();

    const overdueLabel = 'Overdue ' + overdueInDays;

    chipItems.push({
      label: overdueLabel,
      selected: true,
      disabled: false,
      color: 'accent',
      id: planningActivity.id + 'overdue-button'
    })

    return chipItems;
  }