首页 文章

在表上添加列表项

提问于
浏览 次
0

我有一个 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

angular typescript angular-material angular6

3 回答

  • 1

    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

    回复于
  • 4

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

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

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

    希望能帮助到你！

    回复于
  • -1

    我看到您正在使用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 以这种方式在表格中显示数据 .

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

    回复于

相关问题