未找到名称“matAutocomplete”的导出答案

【问题标题】：Export of name 'matAutocomplete' not found未找到名称“matAutocomplete”的导出
【发布时间】：2021-04-15 11:02:59
【问题描述】：

我无法理解我的代码出了什么问题，我导入了模块，但仍然收到此错误“未找到名称导出 'matAutocomplete'”

注意：我在导入 MatAutocompleteModule 后重新启动了几次编译的 IDE，还是一样。

这里是 app.module.ts - 仅粘贴代码的相关部分

import {MatAutocompleteModule} from '@angular/material/autocomplete';
@NgModule({ declarations:[..xxxx....],
imports:[xx,xxx,MatAutocompleteModule],
providers:[xx,xx],
bootstrap: [AppComponent]})
export class AppModule { }

component.html

<form class="form-group-parent p-0" [formGroup]="frmStep1" (ngSubmit)="submit()">
       <mat-form-field class="example-full-width">
          <input type="text" placeholder="Ex. English" aria-label="Language" matInput
                    [formControl]="language" [matAutocomplete]="auto">
               <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                  <mat-option *ngFor="let option of languageList | async" [value]="option">
                        {{option}}
                  </mat-option>
                  </mat-autocomplete>
                 <mat-error>
                    <strong>Language</strong> is required.
                </mat-error>
       </mat-form-field>
</form>

组件.ts

import {Component, OnInit} from '@angular/core';
import {FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

@Component({
  selector: 'xxxx',
  templateUrl: './cxx.component.html',
  styleUrls: ['./xxx.component.scss']
})

export class xxxComponent implements OnInit {

constructor(
 private pageTitle: Title,
 private router: Router,
 private fb: FormBuilder,
 private http: HttpClient,
) { this.createForm(); }

frm1:FormGroup;
frm2:FormGroup;
languageList: Array<any> = ['A','B','C','D','E']
filteredOptions: Observable<string[]>;

ngOnInit():void{
 this.filteredOptions = this.frmStep2.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);

}

createForm(): object {
  this.frmStep1 = this.fb.group({
 language:[,[Validators.required]]
});
return frmStep1 :this.frmStep1 
}

}

【问题讨论】：

标签： angular angular11

【解决方案1】：

我遇到了同样的问题。您可以重建您的应用程序。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

好吧，我需要在特定规范文件的“声明”下添加“MatAutoComplete”。在你的情况下，我想它应该在“component.spec.ts”中。

我就是这样做的

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ... , MatAutocomplete ],
      providers: [ ... ],
    })
    .compileComponents();
  });

【讨论】：