[英]How to use angular material 6 autocomplete with data server
我正在使用Angular 6和Material 6開發一個簡單的頁面。我想使用Material的自動完成功能從服務中恢復數據,但我不知道該怎么做。
從官方示例https://material.angular.io/components/autocomplete/overview我不明白如何使用服務將其與自動完成功能集成。
有誰能夠幫助我?
謝謝
終於,我找到了想做的解決方案! 要將FormArray綁定到mat-table數據源,您必須:簡要地說,示例是這樣的:
<table mat-table [dataSource]="itemsDataSource">
<ng-container matColumnDef="itemName">
<td mat-cell *matCellDef="let element">{{ element.value.material?.name }}</td>
</ng-container>
<ng-container matColumnDef="itemCount">
<td mat-cell *matCellDef="let element">{{ element.value.itemCount }}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: itemColumns;"></tr>
</table>
和代碼:
export class ItemListComponent implements OnInit {
constructor(
private fb: FormBuilder
) { }
itemColumns = ['itemName', 'count'];
itemForm: FormGroup;
itemsDataSource = new MatTableDataSource();
get itemsForm() {
return this.itemForm.get('items') as FormArray;
}
newItem() {
const a = this.fb.group({
material: new FormControl(), //{ name:string }
itemCount: new FormControl() // number
});
this.itemsForm.push(a);
this.itemsDataSource._updateChangeSubscription(); //neccessary to render the mat-table with the new row
}
ngOnInit() {
this.itemForm = this.fb.group({
items: this.fb.array([])
});
this.newItem();
this.itemsDataSource.data = this.itemsForm.controls;
}
}
用戶更改輸入值后,您只需要填充服務器數據中的options
。
<input type="text" matInput (input)="onInputChanged($event.target.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">{{ option.title }}</mat-option>
</mat-autocomplete>
在您的組件文件中,您需要處理onInputChanged(searchStr)
和options
。
onInputChanged(searchStr: string): void {
this.options = [];
if (this.subscription) {
this.subscription.unsubscribe();
}
this.subscription = this.yourService.getFilteredData(searchStr).subscribe((result) => {
this.options = result;
});
}
好吧,假設您從服務器返回的數據作為具有IyourAwesomeData之類的結構的對象,在此示例中,我們將使用someName字段來過濾數據
所以我們的組件應該看起來像這樣:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith, debounceTime, map, switchMap, distinctUntilChanged } from 'rxjs/operators';
import { Subscription } from 'rxjs';
interface IyourAwesomeData {
someName: string;
someField: string;
someOtherField: number;
}
export class YourAutcompleteComponent implements OnInit, OnDestroy {
dataFiltered: IyourAwesomeData[]; // this data will be used inside HTML Template
data: Observable<IyourAwesomeData[]>;
yourInputCtrl = new FormControl();
private sub: Subscription;
constructor() {}
ngOnInit() {
this.data = ??? // Pass your data as Observable<IyourAwesomeData[]>;
this.sub = this.yourInputCtrl.valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged(),
startWith(''),
switchMap((val) => {
return this.filterData(val || '');
})
).subscribe((filtered) => {
this.dataFiltered = filtered;
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
filterData(value: string) {
return this.data // like IyourAwesomeData[]
.pipe(
map((response) => response.filter((singleData: IyourAwesomeData) => {
return singleData.someName.toLowerCase().includes(value.toLowerCase())
})),
);
}
}
而且您的HTML模板應如下所示:
<mat-form-field>
<input matInput placeholder="some placeholder" [matAutocomplete]="auto" [formControl]="yourInputCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let single of dataFiltered" [value]="single.someName">
{{ single.someName }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.