Ich versuche, in meinem angle2-Projekt die Komponente angular material autocomplete zu verwenden. Ich habe folgende zu meiner Vorlage hinzugefügt.
<md-input-container>
<input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let state of filteredStates | async" [value]="state">
{{ state }}
</md-option>
</md-autocomplete>
Folgendes ist meine Komponente.
import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";
@Component({
templateUrl: './edit_item.component.html',
styleUrls: ['./edit_item.component.scss']
})
export class EditItemComponent implements OnInit {
stateCtrl: FormControl;
states = [....some data....];
constructor(private route: ActivatedRoute, private router: Router) {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
}
ngOnInit(): void {
}
filterStates(val: string) {
return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
}
}
Ich erhalte den folgenden Fehler. Es sieht so aus, als ob die Anweisung formControl
nicht gefunden wird.
Kann nicht an 'formControl' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist
Worum geht es hier?
Während Sie formControl
verwenden, müssen Sie ReactiveFormsModule
in Ihr imports
Array importieren.
Beispiel:
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
...
})
export class AppModule {}
Vergessen Sie den Versuch, das Beispiel .ts zu entschlüsseln - wie andere gesagt haben, ist es oft unvollständig.
Klicken Sie stattdessen einfach auf das 'Pop-Out'-Symbol, das hier eingekreist ist, und Sie erhalten ein voll funktionsfähiges StackBlitz-Beispiel .
Sie können die erforderlichen Module schnell bestätigen:
Kommentieren Sie alle Instanzen von ReactiveFormsModule
aus, und Sie werden mit Sicherheit den Fehler erhalten:
Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.