在表格中添加列表项答案

【问题标题】：To add the list-items on the table在表格中添加列表项
【发布时间】：2019-04-30 03:52:50
【问题描述】：

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

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

Stackblitz DEMO

【问题讨论】：

那么你的问题是什么？
我想我已经正确解释了这个问题..:)@TeunvanderWijst

标签： angular typescript angular-material angular6

【解决方案1】：

Demo with option selected from autocomplete is inserted into Table

将mat-autocomplete 上的optionSelected 事件用作(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

【讨论】：

这正是我要找的东西，谢谢。
我可以增加 No 列，在增加随机 customers 时按升序递增。意味着如果我首先添加customer 4 他的no 将是1，然后如果我添加customer 1 他的no 将是2.... 等等。有可能吗？
请看这个，那个：stackblitz.com/edit/…
感谢您的回复...:)

【解决方案2】：

您可以像在示例中使用的那样使用@angular/material 对表格进行过滤。这是它的文档：Angular Material Table Filtering。

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

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

希望对你有帮助！

【讨论】：

现在我可以从list 添加，我很好。但是我们应该添加多个 .means 表必须在从列表中添加时增加。