如何在mat-chip-list芯片过多时显示省略或数量提示（如+N）

要实现芯片列表溢出时显示+N这类提示，你需要结合DOM计算动态控制可见芯片数量，并添加条件渲染的提示芯片，具体步骤如下：

1. 修改HTML结构 #

在mat-chip-list中添加一个用于显示溢出数量的禁用芯片，同时给芯片列表添加模板引用变量以便后续DOM操作：

<div class="divclass">
  <mat-form-field>
    <mat-label>Names</mat-label>
    <mat-select formControlName="names" name="names" multiple (selectionChange)="namechange($event.value)">
      <mat-select-trigger>
        <mat-chip-list #chipList>
          <!-- 渲染可见的芯片 -->
          <mat-chip *ngFor="let name of visibleNames" removable (removed)="removename(name)">
            {{ name }}
            <mat-icon matChipRemove>cancel</mat-icon>
          </mat-chip>
          <!-- 溢出时显示数量提示 -->
          <mat-chip *ngIf="hiddenCount > 0" disabled>
            +{{ hiddenCount }}
          </mat-chip>
        </mat-chip-list>
      </mat-select-trigger>
      <mat-option *ngFor="let name of nameList" [value]="name">
        {{ name }}
      </mat-option>
    </mat-select>
    <mat-icon matSuffix>keyboard_arrow_down</mat-icon>
  </mat-form-field>
</div>

2. 添加TS逻辑计算可见芯片 #

通过ViewChild获取芯片列表元素，计算在限制高度内能够显示的芯片数量，动态更新可见芯片数组和隐藏数量：

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatChipList } from '@angular/material/chips';

@Component({
  // 组件元数据（保持你的原有配置）
})
export class YourComponent {
  selectednameList: string[] = [];
  nameList: string[] = []; // 你的选项数据源
  visibleNames: string[] = [];
  hiddenCount = 0;

  @ViewChild('chipList') chipList!: MatChipList;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.updateVisibleChips();
  }

  namechange(selectedValues: string[]) {
    this.selectednameList = selectedValues;
    this.updateVisibleChips();
  }

  removename(name: string) {
    this.selectednameList = this.selectednameList.filter(item => item !== name);
    this.updateVisibleChips();
    // 同步更新表单控件值
    this.yourFormGroup.get('names')?.setValue(this.selectednameList);
  }

  updateVisibleChips() {
    if (!this.chipList || this.selectednameList.length === 0) {
      this.visibleNames = [...this.selectednameList];
      this.hiddenCount = 0;
      return;
    }

    const chipWrapper = this.chipList._elementRef.nativeElement.querySelector('.mat-chip-list-wrapper');
    const wrapperHeight = chipWrapper.offsetHeight;
    let totalHeight = 0;
    let visibleCount = 0;

    // 先重置可见列表，强制更新DOM以获取最新元素尺寸
    this.visibleNames = [...this.selectednameList];
    this.hiddenCount = 0;
    this.cdr.detectChanges();

    // 计算容器能容纳的芯片数量
    const chips = chipWrapper.querySelectorAll('.mat-chip');
    for (let i = 0; i < chips.length; i++) {
      const chip = chips[i];
      totalHeight += chip.offsetHeight;
      if (totalHeight <= wrapperHeight) {
        visibleCount++;
      } else {
        break;
      }
    }

    // 调整可见列表和隐藏数量（预留一个位置给提示芯片）
    if (visibleCount < this.selectednameList.length) {
      this.hiddenCount = this.selectednameList.length - (visibleCount - 1);
      this.visibleNames = this.selectednameList.slice(0, visibleCount - 1);
    } else {
      this.hiddenCount = 0;
      this.visibleNames = [...this.selectednameList];
    }
  }
}

3. 调整CSS样式 #

优化芯片列表布局，确保提示芯片样式统一：

::ng-deep .mat-chip-list-wrapper {
  height: 3rem; 
  overflow: hidden;
  align-items: center; /* 垂直居中芯片 */
  flex-wrap: wrap;
}

::ng-deep .mat-chip.disabled {
  background-color: #e0e0e0;
  color: #666;
  cursor: default;
  margin-left: 8px;
}

关键说明 #

• 利用ChangeDetectorRef强制触发DOM更新，确保计算时能获取到最新的芯片元素尺寸
• 计算芯片总高度时，先重置可见列表再获取DOM元素，保证计算准确性
• 移除芯片时同步更新表单控件的值，保持数据与视图一致性

内容的提问来源于stack exchange，提问作者Jithin RS