垫芯片列表中的角材料ngFor-如何防止断线？

Question

Stackblitz中的问题案例

问题：如何实现角材料中的mat-chips处于同一行（按标准），但是当通过ngFor在mat-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>

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

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