当 Angular 中的 mat-chip-list 项数超过 5 个时，通过 CSS 动态启用垂直滚动条，避免内容溢出且保持界面整洁。关键在于正确使用 overflow-y: auto 而非 scroll，并确保条件绑定生效。
当 angular 中的 `mat-chip-list` 项数超过 5 个时，通过 css 动态启用垂直滚动条，避免内容溢出且保持界面整洁。关键在于正确使用 `overflow-y: auto` 而非 `scroll`，并确保条件绑定生效。
要实现“列表项超过 5 个时自动显示垂直滚动条”，需同时解决 样式逻辑 和 绑定时机 两个核心问题。
✅ 正确做法：使用 overflow-y: auto + 动态类绑定
overflow-y: scroll 会始终显示滚动条轨道（即使内容未溢出），而 overflow-y: auto 仅在内容实际超出容器高度时才显示滚动条——这正是 UX 所需的行为。
首先，修正 CSS 类定义（移除 !important，提升可维护性）：
.koostaja-choosen {
max-height: 100px;
overflow-y: hidden; /* 默认隐藏 */
overflow-x: hidden;
font-size: 12px;
}
.koostaja-choosen.scrollable {
overflow-y: auto; /* 关键：仅需 auto，非 scroll */
}然后，在模板中使用 [ngClass] 绑定滚动状态（注意：需确保 koostamiseForm.get('koostajad')?.value 是数组且可安全取 .length）：
<div
class="col-7 container w-100 koostaja-choosen fixed-height"
[ngClass]="{ 'scrollable': getChipCount() > 5 }"
>
<mat-chip-list #koostajaChipList>
<span *ngFor="let koostaja of koostamiseForm.get('koostajad').value">
<mat-chip
*ngFor="let profiil of koostaja.profiilList"
[selectable]="false"
[removable]="true"
(removed)="removeKoostaja(profiil, koostamiseForm)"
class="font-size-14px"
matTooltip="{{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}"
>
{{koostaja.eesnimi}} {{koostaja.perenimi}}
<mat-icon matChipRemove *ngIf="!isDokumentJoustanud">cancel</mat-icon>
</mat-chip>
</span>
<mat-error *ngIf="koostamiseForm.get('koostajad')?.errors?.required">
Koostaja on vaja lisada!
</mat-error>
</mat-chip-list>
</div>并在组件 TypeScript 中添加辅助方法，确保空值/undefined 安全：
getChipCount(): number {
const koostajad = this.koostamiseForm.get('koostajad')?.value || [];
// 计算所有 koostaja 下 profiilList 的总 chip 数（因每个 koostaja 可含多个 profiil）
return Array.isArray(koostajad)
? koostajad.reduce((sum, k) => sum + (Array.isArray(k.profiilList) ? k.profiilList.length : 0), 0)
: 0;
}⚠️ 注意事项：
- 避免直接在模板中写复杂表达式（如 koostamiseForm.get('...').value.length > 5），易因异步表单初始化、null/undefined 导致 ExpressionChangedAfterItHasBeenCheckedError；
- 使用 getChipCount() 方法封装逻辑，既提升可读性，又便于单元测试；
- max-height: 100px 必须明确设置，否则 overflow-y 不生效；
- 若需平滑滚动体验，可额外添加 scroll-behavior: smooth。
最终效果：当总 chip 数 ≤ 5 时，无滚动条；> 5 时，自动启用垂直滚动，且仅在需要时显示滚动轨道——简洁、高效、符合 Material Design 交互规范。
