Чтобы добавить элементы списка в таблицу

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

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

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

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

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

• Использовать событие optionSelected на mat-autocomplete как (optionSelected) = "selectedOption($event)"
• Инициализируйте arry для хранения всех выбранных данных, скажем, selectedtableData: PeriodicElement[] = [].

См. Этот Код для выполнения требования:

const ELEMENT_DATA: PeriodicElement[] = [ 
{position: 1, email: '[email protected]', name: 'Customer 1'}, 
{position: 2, email: '[email protected]', name: 'Customer 2'},  
{position: 3, email: '[email protected]', name: 'Customer 3'},  
{position: 4, email: '[email protected]', 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