Угловой материал ngFor в mat-chip-list - как предотвратить разрыв строки?

Question

дело о выдаче в стеке

Проблема: Как добиться, чтобы 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 для каждого элемента