angular - Angular Material:错误“没有 MatChip 的提供者”
问题描述
我想在我的组件中使用 mat-chips
我的comp.module.html
<mat-form-field class="example-chip-list" #chipList>
<mat-chip-list>
<mat-chip *ngFor="let role of user.roles" [selectable]="selectable"
[removable]="removable"
(removed)="remove(role)">{{ role.name }}</mat-chip>
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
我的comp.module.ts
@NgModule({
declarations: [MyComp],
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatChipsModule,
MatAutocompleteModule
],
exports: [MyComp]
})
export class MyCompModule { }
但它引发了一个错误:
error-handler.service.ts:11 Error: StaticInjectorError(AppModule)[MatChipRemove -> MatChip]:
StaticInjectorError(Platform: core)[MatChipRemove -> MatChip]:
NullInjectorError: No provider for MatChip!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717)
at resolveToken (core.js:954)
at tryResolveToken (core.js:898)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
at resolveToken (core.js:954)
at tryResolveToken (core.js:898)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
at resolveNgModuleDep (core.js:17656)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18345)
at resolveDep (core.js:18716)
它似乎全部加载到模块中......
解决方案
我最近遇到了同样的问题,发现写入控制台的错误没有帮助。如果您的问题与我的相同,则问题出在您的 HTML 中。将您的 HTML 更改为此。
<mat-form-field class="example-chip-list" #chipList>
<mat-chip-list>
<mat-chip *ngFor="let role of user.roles" [selectable]="selectable"
[removable]="removable"
(removed)="remove(role)">
{{ role.name }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
问题是具有 matChipRemove 属性的 mat-icon 元素必须放置在与之配对的 mat-chip 元素内。
推荐阅读
- webpack - webpack-dev-server 似乎只适用于静态文件
- python - locust.io 在没有 web 的情况下运行时是否可以在 locust.io 中获取异常报告 csv 文件
- python-3.x - 与外部 MQTT 代理连接时出现问题
- python - 如何在 python 中使用 int() 将数字四舍五入到最小值
- opencv - 使用 Cuda 10.2 构建 OpenCV 2.4xx 时出错
- c++ - Xout_of_range("invalid string position"); 的运行时检查失败 #0 在 xstring 中
- ios - 我无法提交我的 App Store 应用程序,因为它没有看到 assets 文件夹。解决办法是什么?
- c# - 绑定或委托属性
- html - 有没有一种方法可以让一个菜单按钮优先于另一个?
- r - R 使用列名字符串作为函数参数来引用列