Как я могу ограничить количество компонентов mat-chip, отображаемых в строке, и поместить оставшиеся в новую строку ниже в списке mat-chip? - PullRequest
Новая
       9

Как я могу ограничить количество компонентов mat-chip, отображаемых в строке, и поместить оставшиеся в новую строку ниже в списке mat-chip?

0 голосов
/ 07 ноября 2019

Я хочу контролировать количество мат-чипов, отображаемых в строке, скажем, 3 или 4, и отображать оставшиеся в новой строке. В текущем сценарии мат-чипы добавляются горизонтально, следовательно, выходят из порта просмотра.

Я не смог найти надежного решения в интернете. 

<div class="ItemList">  
<div *ngFor="let item1 of item.List" style="display:inline-block;">
              <div *ngIf="item1.checked == true" style="display:inline-block;">
                  <mat-chip-list>
                    <mat-chip style="display:inline-block;" [selectable]="selectable" [removable]="removable"
                    (removed)="newselection(item1.ItemId, item.ModuleId)">
                        {{item1.ItemName}}  
                        <mat-icon matChipRemove *ngIf="removable">
                            cancel
                        </mat-icon>
                    </mat-chip>
                  </mat-chip-list>
              </div>
          </div>
</div>

Я ожидаю, что выход чипов не выйдет за пределы div с классом ItemList. Когда одна фишка достигнет минимальной ширины, остальные переместятся на новую строку.

...