Question

我正在尝试按照Angular Material指南为自动填充输入文本创建自定义过滤器

https://material.angular.io/components/autocomplete/overview

这就是我所拥有的

TS

import { Component, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map, startWith, filter } from 'rxjs/operators';

(...)

export class AppComponent implements OnInit {
  title = 'Your Profile';
  displayedColumns: string[] = ['selected', 'name', 'description', 'pnr'];
  dataSource = ELEMENT_DATA;

  myControl = new FormControl();
  options: any[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value: any): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option =>   option.toLowerCase().includes(filterValue));
  }
}

HTML

<mat-form-field class="full-with-field" hintLabel="(or code)"> 
    <input matInput placeholder="RP oficina/Nombre empresa" [formControl]="companyControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete"> 
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}} 
        </mat-option> 
    </mat-autocomplete> 
</mat-form-field>

我在退货时出错，我唯一遇到的错误是

[ts] Property 'filter' does not exist on type '{}'.

如您所见，选项是数组的一部分，所以我不知道会发生什么。

在Firefox中调试时，会收到下一条错误消息：

Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("="(or code)"> <input
                            matInput placeholder="RP oficina/Nombre empresa"
                            [ERROR ->][formControl]="companyControl" [matAutocomplete]="auto">
                        <mat-autocomplete #auto="matAutocompl"): ng:///AppModule/AppComponent.html@26:7
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'. ("put
                            matInput placeholder="RP oficina/Nombre empresa"
                            [formControl]="companyControl" [ERROR ->][matAutocomplete]="auto">
                        <mat-autocomplete #auto="matAutocomplete"> <mat-option
                            *ngFo"): ng:///AppModule/AppComponent.html@26:38
There is no directive with "exportAs" set to "matAutocomplete" (" empresa"
                            [formControl]="companyControl" [matAutocomplete]="auto">
                        <mat-autocomplete [ERROR ->]#auto="matAutocomplete"> <mat-option
                            *ngFor="let option of filteredOptions | async" [value]=""): ng:///AppModule/AppComponent.html@27:24
Can't bind to 'value' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omplete #auto="matAutocomplete"> <mat-option
                            *ngFor="let option of filteredOptions | async" [ERROR ->][value]="option">
                        {{option}} </mat-option> </mat-autocomplete> <mat-hint align="end">Para desc"): ng:///AppModule/AppComponent.html@28:54
'mat-option' is not a known element:
1. If 'mat-option' is an Angular component, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("ntrol]="companyControl" [matAutocomplete]="auto">
                        <mat-autocomplete #auto="matAutocomplete"> [ERROR ->]<mat-option
                            *ngFor="let option of filteredOptions | async" [value]="option">
                        {{option}"): ng:///AppModule/AppComponent.html@27:49
'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""RP oficina/Nombre empresa"
                            [formControl]="companyControl" [matAutocomplete]="auto">
                        [ERROR ->]<mat-autocomplete #auto="matAutocomplete"> <mat-option
                            *ngFor="let option of filteredOptions "): ng:///AppModule/AppComponent.html@27:6
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
    at compiler.js:24500
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
    at compiler.js:24410
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14851
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:24570
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:24557
(anonymous) @ compiler.js:24500
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:24500
(anonymous) @ compiler.js:24410
then @ compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:24409
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:24369
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_NGCC__ @ core.js:14376
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:14559
./src/main/angular/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

Answer 1

第1步。

ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
   );
}
private _filter(value: any): string[] { const filterValue = value.toLowerCase(); 
//Use the pipe 
return this.options.pipe(filter(option => option.toLowerCase().includes(filterValue)));
}

第2步。

对于控制台错误

使用formControl时，您需要导入ReactiveFormsModule 确保您将ReactiveFormsModule导入了imports array

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
 imports: [
   BrowserModule,
   FormsModule,
   ReactiveFormsModule,
   MaterialModule,
],

See the docs here

Answer 2

我认为您错过了一些导入。对于Rxjs 6，请尝试：

import { filter } from 'rxjs/operators';

对于Rxjs 5，请尝试：

import 'rxjs/add/operator/filter';

我建议您在编码器中安装一个intellisense。

Answer 3

您在matAutocomplete中缺少开头[

ts属性“过滤器”在类型“ {}”上不存在

3 个答案: