自动完成不是有角度的?
发布时间:2020-12-17 07:47:45 所属栏目:安全 来源:网络整理
导读:我想为下面的数据做自动填充文本框 Elements = [ { id: 1,name: 'Hydrogen' },{ id: 2,name: 'Helium' },{ id: 3,name: 'Lithium' } ]; HTML mat-form-field class="example-full-width" input type="text" placeholder="Pick one" aria-label="Number" matI
我想为下面的数据做自动填充文本框
Elements = [ { id: 1,name: 'Hydrogen' },{ id: 2,name: 'Helium' },{ id: 3,name: 'Lithium' } ]; HTML <mat-form-field class="example-full-width"> <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="name" [matAutocomplete]="auto" [errorStateMatcher]="matcher"> <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (selectionChange)="elementSelectionChange($event)"> <mat-option *ngFor="let Element of filteredOptions | async" [value]="Element.name"> {{ Element.name}} </mat-option> </mat-autocomplete> <mat-error *ngIf="myForm.hasError('required','name')">Please choose an name</mat-error> </mat-form-field> 零件 export class DialogOverviewExampleDialog implements OnInit{ Elements = [ { id: 1,name: 'Lithium' } ]; matcher = new MyErrorStateMatcher(); selectedElementSymbol: any; myForm: FormGroup; symbol; //name; name: FormControl = new FormControl(); id; filteredOptions: Observable<string[]>; OnInit() { this.filteredOptions = this.name.valueChanges.pipe( startWith(''),map(val => this.filter(val)) ); } filter(val: any): any[] { return this.Elements.filter(Element => { return Element.name.toLowerCase().indexOf(val.toLowerCase()) > -1; }); } constructor( public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,@Inject(MAT_DIALOG_DATA) public data: any,private formBuilder: FormBuilder) { } } 这是我到目前为止所建立的.自动完成功能不起作用,但有人帮助我继续前进 demo
问题是你实现OnInit的方式不正确.在你的table-basic-example.ts中,将OnInit更改为ngOnInit,一切都会正常工作.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |