Question

问题：如何实现角材料中的mat-chips处于同一行（按标准），但是如何在{{1}内的ngFor中通过mat-chip-list进行循环}}），它们全部放在单独的行上（请参见“名称”列）。

目标：我想将其排成一行，直到由于宽度限制而中断（请参见“重量”列）。

以逗号分隔的字符串元素名称（例如A，Z）应在行上彼此相邻：

mat-cell

与

相同

    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'},
    ];

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

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

1 个答案: