angular - 如何在数据服务器中使用 Angular Material 6 自动完成功能
问题描述
我正在使用 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;
}
}
推荐阅读
- c# - 从后台进程获取控制台应用程序
- java - 找不到 com.android.tools.build:gradle:2.3.+ 的任何匹配项
- angular - 如何为图形提供弯曲的边框
- reactjs - 部署到 Firebase 托管后,我的反应项目无法正常工作
- python - 在上下文完全访问和上下文无关访问中使用 libnfs 时速度较慢
- first-order-logic - 在没有指数爆炸的情况下将一阶逻辑转换为 CNF
- c# - JSON用listposition C#序列化对象列表
- python - 如何在现有 csv 文件的第二列添加新列(带有标题名称)?
- java - gwhalin memcached java客户端设置对象大小> 1 MB增加slab大小
- domain-driven-design - DDD - 由于聚合数据不同而导致多个有界上下文?