mat-chip-list 中的 Angular Material ngFor - 如何防止换行？

Question

issue case in stackblitz

问题:如何实现 Angular-Material 中的 mat-chips 位于一行(因为它们是标准的)，但是当通过 mat- 中的 ngFor 循环时chip-list(位于 mat-cell 内)，它们全部放置在单独的行上(请参阅“名称”列)。

目标:我希望将其排在每个旁边的行中，直到由于宽度限制而中断(请参阅“重量”列)。

名称的逗号分隔字符串元素(例如 A、Z)应该在线上彼此相邻:

    const ELEMENT_DATA: PeriodicElement[] = [
      {position: 1, name: 'A, Z', weight: 1.0079, symbol: 'H'},
      {position: 2, name: 'this first, this second in line', weight: 4.0026, symbol: 'He'},
    ];

如

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
          <mat-chip-list class="no-wrap" *ngFor="let n of element.name.split(',')">
            <span class="nobreak">
              <mat-chip class="no-wrap">{{n}}</mat-chip>
            </span>
          </mat-chip-list>
        </td>
    </ng-container>

visualisation issue case with angular-material

Answer 1

您的*ngFor标签错误，您必须将其放在 <mat-chip> 上，见下文:

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element">
        <mat-chip-list class="no-wrap" >
            <mat-chip class="no-wrap" *ngFor="let n of element.name.split(',')">{{n}}</mat-chip>
        </mat-chip-list>
      </td>
    </ng-container>

使用您的代码创建 mat-chip-list对于每个元素