如何使用角度材料 6 自动完成数据服务器 [英] How to use angular material 6 autocomplete with data server
问题描述
我正在使用 Angular 6 和 Material 6 开发一个简单的页面.我想使用 Material 的自动完成功能从服务中恢复数据,但我不知道如何做好.
I'm developing a simple page with Angular 6 and Material 6. I want to recover data from a service using the autocomplete of Material, but I don´t know how to do it well.
来自官方示例https://material.angular.io/components/autocomplete/overview 我不明白如何使用服务将其与自动完成功能集成.
From the official example https://material.angular.io/components/autocomplete/overview I don't understand how to use a service to integrate it with the autocomplete.
有人可以帮我吗?
谢谢
推荐答案
最后,我找到了我想做的事情的解决方案!要将 FormArray 绑定到 mat-table dataSource,您必须:简而言之,示例如下:
Finally, I found a solution to what I wanted to do! To bind a FormArray to mat-table dataSource you have to: Briefly, the example is this:
<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;
}
}
这篇关于如何使用角度材料 6 自动完成数据服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!