在表上添加列表项

我有一个 autocomplete 组件,它由客户列表组成,在 autocomplete 组件 table 组件下方,如下图所示:

enter image description here

The table is empty by default . 现在,当_13100100_来自 customer-list(i,e autocomplete) 组件时,我应该在表格中显示该客户的详细信息,如下所示:

enter image description here

Stackblitz DEMO

回答(3)

2 years ago

Demo with option selected from autocomplete is inserted into Table

  • mat-autocomplete 上使用 optionSelected 事件为 (optionSelected)="selectedOption($event)"

  • 初始化arry以存储所有选定的数据,例如 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);
 }

Application Code : https://stackblitz.com/edit/angular-add-element-from-autocomplete?file=app%2Fautocomplete-filter-example.ts

Update 1 :
用于制作唯一的序列号:

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

2 years ago

您可以在表格中使用@ angular / material过滤,就像您在示例中使用的那样 . 这是它的文档:Angular Material Table Filtering .

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

我通过修改你的demo:Stackblitz在Stackblitz上做了一个简单的例子 .

希望能帮助到你!

2 years ago

我看到您正在使用mat-table,因此您需要在下拉列表中的click事件上填充dataSource,以在表格中显示您选择的数据 .

如果您想在mat-table中显示Customer,那么您的 options: string[] = ['Customer 1', 'Customer 2', 'Customer 3', 'Customer 4']; 应该与您的dataSource类似 PeriodicElement interface

enter image description here

您的选项是字符串数组,但您需要具有名称,位置,电子邮件密钥的对象 - 再次作为您的Stackblitz演示中的 PeriodicElement interface 以这种方式在表格中显示数据 .

此外,您的问题没有得到妥善解释,请以适当的方式询问 .