Добавить список элементов на стол

Question

У меня есть компонент autocomplete, который состоит из списка клиентов, ниже компонента autocomplete компонент table, как показано на рисунке ниже:

По умолчанию таблица пуста .Теперь, когда я choose/click из customer-list(i,e autocomplete) компонента, я должен отобразить детали этих клиентов в таблице примерно так:

Stackblitz DEMO

Answer 1

Я вижу, что вы используете mat-table, поэтому вам нужно заполнить dataSource при щелчке по опции из выпадающего списка, чтобы показать выбранные вами данные в таблице.

Также ваши параметры : строка [] = ['Клиент 1', 'Клиент 2', 'Клиент 3', 'Клиент 4']; должен иметь аналогичный интерфейс PeriodicElement в качестве источника данных, если вы хотите отобразить Customer в mat-таблице, как показано в вопросе:

Вы можете выбрать массив строк, новам нужен объект с именем, позицией, адресом электронной почты ключами - снова как интерфейс PeriodicElement из вашей демонстрации Stackblitz, чтобы таким образом отображать данные в таблице.

Также ваш вопрос не объяснен должным образом, и, пожалуйста, задайте его правильно.

Answer 2

Демонстрация с опцией, выбранной из автозаполнения, вставлена ​​в таблицу

• Использование события 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 3

Вы можете использовать фильтрацию по таблице с @ angular / material, как вы использовали в своем примере.Вот документация для него: Фильтрация таблицы угловых материалов .

Вы можете использовать вывод optionSelected на mat-autocomplete, чтобы установить значение таблицы при выборе опции.И очистите таблицу значений при изменении ввода.

Я сделал быстрый пример на Stackblitz, изменив вашу демонстрацию: Stackblitz .

Надеюсь, это поможет!