代码之家 › 专栏 › 技术社区 › ar099968

角度材质:错误“没有匹配的提供程序”

angular-material angular

ar099968 · 技术社区 · 5 年前

我想在我的组件中使用垫子芯片

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>

我的公司模块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)

似乎都被加载到模块中了…

1 回复 | 直到 5 年前

Nics1225 5 年前

最近我遇到了同样的问题,发现写在控制台上的错误是无用的。如果您的问题与我的相同,那么问题就在您的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>

问题是,具有matchinipremove属性的mat icon元素必须放置在与之配对的mat chip元素中。