如何在Bootstrap主题项目中正常显示Angular Material的mat-chip组件？

问题根因 #

该现象是典型的Angular变更检测未触发导致的视图更新延迟，叠加代码本身存在的语法错误，共同导致mat-chip渲染异常。

解决方案 #

• 修复HTML模板语法错误
  你提供的input标签中[matChipInputFor]属性缺少闭合引号，修改后完整代码如下：

<input id="intrest" placeholder="Enter Interest" #interestInput [formControl]="interestCtrl" list="interestList" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="addInterests($event)" autocomplete="off" (keypress)="intrestKeyPress($event)"/>
<mat-chip-list #chipList>
    <mat-chip style="background-color:#0F52BA; color: white;" *ngFor="let interest of Interests; trackBy: trackByInterest" [selectable]="selectable" [removable]="removable" (removed)="removeInterests(interest)" [(ngModel)]="interest"> {{interest}}
        <i class="fa fa-times" matChipRemove *ngIf="removable"></i>
    </mat-chip>
</mat-chip-list>

• 手动触发变更检测
  在组件中注入变更检测器，每次更新Interests数组后强制触发视图更新：

// 引入依赖
import { ChangeDetectorRef } from '@angular/core';

// 构造函数注入
constructor(private cdr: ChangeDetectorRef) {}

// trackBy函数，优化列表渲染
trackByInterest(index: number, interest: string) {
  return interest;
}

// 在addInterests、removeInterests等修改Interests数组的方法末尾添加变更检测触发代码
addInterests(event) {
  // 原有逻辑
  this.Interests = [...this.Interests, event.value];
  // 新增行，强制更新视图
  this.cdr.detectChanges();
}

• 优化数组更新逻辑
  Angular默认通过引用检测数组变化，直接修改数组元素不会触发重渲染，建议每次更新数组后生成新的数组实例：

// 新增元素写法
this.Interests = [...this.Interests, 新元素];
// 删除元素写法
this.Interests = this.Interests.filter(i => i !== targetInterest);

• 检查Angular Material主题引入
  确保全局样式文件（如styles.css）中已经引入了Material预构建主题，未引入主题会导致组件样式加载异常，也可能和Bootstrap样式发生冲突：

@import "@angular/material/prebuilt-themes/indigo-pink.css";

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