Angular Mat-Chips连续显示5

Question

我有来自角质材料的基本垫子。我正在尝试将它们连续将5放置，而不会增加它们的大小：
chip1 chip2 chip3 chip4 chip5 chip5 ....................................................................................................................................................................................................................................................................................................................... chip6 chip7 chip8 chip9 chip9 chip10 ...... chip11 chip12 ............................................................................................................................ ....（剩余空间）。

因此，基本上，我不希望在任何情况下芯片的大小增加。是否有可能使用Flexbox进行此操作？我尝试了一些事情： HTML：

<div class='list'>
   <mat-form-field class="example-chip-list" appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" id='item' (removed)="remove(fruit)">
      {{fruit.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>
</div>

CSS：

.list{
 width: 100%;
 flex-flow: row wrap;
}

#item{
flex: 1 0 20%; //this is not working because chip's size is increasing to take full width of the div
}

Answer 1

我认为目前无法使用Pure CSS完成此操作（尽管我可能错了）。如果您知道芯片的大小相同，我想您可以使用CSS网格布局，但是我不认为在这里是这样。我要做的是在每个n个项目（在您的情况下为5）添加一个额外的HTML元素，以迫使休息。

您将必须将*ngfor移动到更高级别（使用ng-container不要生成额外的标记），并使用索引来计算是否应插入额外的项目是否（就您的情况而言，每5芯片之后）：

<div class="list">
  <mat-form-field class="example-chip-list" appearance="fill">
    <mat-label>Favorite Fruits</mat-label>
    <mat-chip-list #chipList aria-label="Fruit selection">
      <ng-container *ngFor="let fruit of fruits; let idx = index;">
        <mat-chip id="item" (removed)="remove(fruit)">
          {{fruit.name}}
          <button matChipRemove>
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip>
        <br class="breaker" *ngIf="(idx+1)%5===0" />
      </ng-container>
    </mat-chip-list>
  </mat-form-field>
</div>

我选择＆lt; br/＆gt;标签，因为它适合语义，但请选择您。

然后，只需样式.breaker正确：

.breaker {
  width:100%;
  content: '';
}

这是工作stackblitz 。

请记住，此解决方案没有响应 - 例如，在5个芯片无法放入一行的情况下。但是话又说回来，您的要求（每排5芯片）不会留出太大的空间来使其响应能力。我想可以通过测量渲染芯片并使用脚本调整运行的布局来调整它，但这是您必须根据要求自行找出的东西。