如何将 Angular Material 6 自动完成功能与数据服务器结合使用

2024-04-19

我正在使用 Angular 6 和 Material 6 开发一个简单的页面。我想使用 Material 的自动完成功能从服务中恢复数据,但我不知道如何做好。

来自官方的例子https://material.angular.io/components/autocomplete/overview https://material.angular.io/components/autocomplete/overview我不明白如何使用服务将其与自动完成功能集成。

有谁能够帮助我?

Thanks


最后,我找到了我想做的事情的解决方案! 要将 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;
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Angular Material 6 自动完成功能与数据服务器结合使用 的相关文章

随机推荐