Блог

проблема в stackblitz

Проблема: Как добиться того, чтобы mat-chips в angular-material были в одной строке (поскольку они являются стандартными), но при зацикливании через ngFor в mat-chip-list (который находится внутри mat-cell ), они помещаются все в отдельную строку (см. столбец «Имя»).

Цель: я хотел бы разместить его в строке рядом с каждым до разрыва из-за ограничения ширины (см. Столбец «Вес»).

фрагменты строковых элементов name, разделенных запятой (например, 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>
  

проблема с визуализацией в случае с angular-material

Ваш *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 для каждого элемента