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

Question

stackblitz 中的问题案例

问题：如何实现mat-chipsin angular-material 在一行中（因为它们是标准的），但是当通过ngForin a mat-chip-list（在 a内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>

带有角度材料的可视化问题案例

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为每个元素创建一个