Как включать собственные данные в ExecutionContext

Я бы сохранил каждый выбранный объект в списке, а затем использовал бы его в качестве свойства dataSource:

И обновил бы свойство DataSource следующим образом:

this.dataSource = new MatTableDataSource(your_list)

HTML Code:

[ 111]

Код TS:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ICustomer } from '../models';
import { DataService } from '../data.service';
import { MatTableDataSource, MatDialog } from '@angular/material';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
  public contacts: ICustomer;
  public selectedCustomers: any[] = [];
  public displayForm: FormGroup;
  public addCustomer: any;
  dataSource = new MatTableDataSource([]);

  list: any[] = []

  public displayedColumns: string[] = ['name', 'email', 'phone', 'button'];

  constructor(private fb: FormBuilder, public dataService: DataService) { }

  public async ngOnInit(): Promise {
    this.displayForm = this.fb.group({
    });
    this.dataService.onSelectCustomer.subscribe(value => {
      if (value) {
        for (var i = 0; i < value.CustomerIds.length; i++) {
          this.list.push(value.CustomerIds[i])
          this.dataSource = new MatTableDataSource(this.list)
        }
        console.log(this.list)
      }
    });
  }

  public onSave(): void {
    this.addCustomer = this.selectedCustomers;
    //console.log(this.addCustomer)
    var arr = this.addCustomer.CustomerIds.map(value => value.id);

    console.log(arr);
  }
}

Стекблиц