在表上添加列表项

Question

我有一个autocomplete组件，它由客户列表组成，在autocomplete组件table组件下面，如下图所示：

该表默认为空。现在，当我从choose/click组件customer-list(i,e autocomplete)进入时，我应该在表中显示该客户的详细信息，如下所示：

Stackblitz DEMO

Answer 1

Demo with option selected from autocomplete is inserted into Table

• 在optionSelected上将mat-autocomplete事件用作(optionSelected)="selectedOption($event)"
• 初始化要存储的所有数据，例如selectedtableData: PeriodicElement[] = []。

请参阅此代码来处理要求：

const ELEMENT_DATA: PeriodicElement[] = [ 
{position: 1, email: 'customer1@gmail.com', name: 'Customer 1'}, 
{position: 2, email: 'customer2@gmail.com', name: 'Customer 2'},  
{position: 3, email: 'customer3@gmail.com', name: 'Customer 3'},  
{position: 4, email: 'customer4@gmail.com', name: 'Customer 4'} ];

selectedOption(event) {    
     const selectedValue = event.option.value;  
     let selectedvalueArr: PeriodicElement = ELEMENT_DATA.find(e=>e.name==selectedValue);
     selectedvalueArr && this.selectedtableData.push(selectedvalueArr)
     this.dataSource = new MatTableDataSource(this.selectedtableData);
 }

应用代码： https://stackblitz.com/edit/angular-add-element-from-autocomplete?file=app%2Fautocomplete-filter-example.ts

更新1：
要创建唯一的序列号：

代码： https://stackblitz.com/edit/angular-add-element-from-autocomplete-cexyka?file=app/autocomplete-filter-example.ts

Answer 2

您可以像在示例中使用的那样，在具有@ angular / material的表上使用过滤。这是它的文档：Angular Material Table Filtering。

您可以使用optionSelected上的mat-autocomplete输出来选择选项时设置表值。并在输入更改时清除表值。

我通过修改您的演示Stackblitz在Stackblitz上做了一个快速示例。

希望有帮助！

Answer 3

我看到您正在使用mat-table，因此您需要从下拉菜单中的click event on填充dataSource，以在表中显示您选择的数据。

还有您的选项：string [] = ['客户1'，'客户2'，'客户3'，'客户4']; 如果您要在有问题的显示中在mat-table中显示Customer，则应该具有与数据源类似的 PeriodicElement接口：

您的选项是字符串数组，但是您需要带有名称，位置，电子邮件键的对象-再次从您的Stackblitz演示中作为 PeriodicElement接口来显示表中的数据那样。

您的问题也没有得到正确的解释，请以正确的方式提出。