Angular Material : error "No provider for MatChip"

Question

我想在我的组件中使用 mat-chips

my-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>

my-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)

好像都加载到模块里了...

Answer 1

我最近遇到了同样的问题，发现写入控制台的错误没有帮助。如果您的问题与我的相同，则问题出在您的 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 元素内。