angular-material - Material Angular Mutliple table dataSource + Material Angular Mutliple table in single template 'ID の列が見つかりませんでした'

Question

単一ページで、タブに 2 つのテーブルを作成したいと考えています。タブは正常に動作しています。html のいずれかのテーブルにコメントすると、単一のテーブルが読み込まれ、consol.table を使用してデータを取得しようとしますが、データも機能しますが、html ではエラーが発生します:

Material Anguler Mutliple table dataSource + 単一テンプレートの Material Anguler Mutliple テーブル「id の列が見つかりませんでした」

//表1

<table mat-table [dataSource]="dataSource" class="table" matSort></table>

//テーブル 2

<table mat-table [dataSource]="dataSource2" class="table" matSort></table>

//ts ファイル内のマテリアル アンギュラーの TS ファイル コード

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/table';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';


export interface Health_Center_Site {
  value: string;
  viewValue: string;
}


@Component({
  selector: 'app-interaction',
  templateUrl: './interaction.component.html',
  styleUrls: ['./interaction.component.scss']
})
export class InteractionComponent implements OnInit {
  Health_Center_Sites: Health_Center_Site[] = [
    { value: '2 Gotham', viewValue: '2 Gotham' },
    { value: 'Astoria Health Center', viewValue: 'Astoria Health Center' },
    { value: 'Bushwick Health Center', viewValue: 'Bushwick Health Center' },
    { value: 'Corona Health Center', viewValue: 'Corona Health Center' },
    { value: 'Crown Heights Health Center', viewValue: 'Crown Heights Health Center' },
    { value: 'East Tremont Health Center', viewValue: 'East Tremont Health Center' },
    { value: 'Fort Greene Health Center', viewValue: 'Fort Greene Health Center' },
    { value: 'Homecrest Health Center', viewValue: 'Homecrest Health Center' },
    { value: 'Morrisania Health Center', viewValue: 'Morrisania Health Center' },
    { value: 'Parsons Health Center', viewValue: 'Parsons Health Center' },
    { value: 'Pop-up LIC', viewValue: 'Pop-up LIC' },
    { value: 'Riverside Health Center', viewValue: 'Riverside Health Center' }
  ];

  panelOpenState = false;

  displayedColumns: string[] = ['Contacted_On','Contacted_By','Mode_of_Contact','Time_Spend','Outcome','Outcome_Reason','Comments','follow_up_Date','action'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);


  displayedColumns2: string[] = ['Transaction','Time_in_source_status','Last_Assignee','Transaction_Date' ];
  dataSource2 = new MatTableDataSource(ELEMENT_DATA2);




  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  constructor() { }

  ngOnInit() {
    console.table(ELEMENT_DATA2);
  }

}




export interface ActivityDetailsDataTable {
  Contacted_On: string;
  Contacted_By: string;
  Mode_of_Contact: string;
  Time_Spend: string;
  Outcome: string;
  Outcome_Reason: string;
  Comments: string;
  follow_up_Date: string;
  action: boolean;
}
const ELEMENT_DATA: ActivityDetailsDataTable[] = [
  { Contacted_On: '10/19/2018', Contacted_By: 'Kagno, Natalya', Mode_of_Contact: 'Call', Time_Spend: '1:00 Hrs', Outcome: 'Not Started', Outcome_Reason: 'Open Enrollment Closed, Special Exception Do Not Apply', Comments: 'Client did not have childs ss number on hand', follow_up_Date: '10/19/2018    ', action: true, }
];



export interface TransactionDetailsDataTable {
  Transaction: string;
  Time_in_source_status: string;
  Last_Assignee: string;
  Transaction_Date: string;
}
const ELEMENT_DATA2: TransactionDetailsDataTable[] = [
  { Transaction: 'Inprogress >> Complete    ', Time_in_source_status: '13:30', Last_Assignee: 'Kagno, Natalya', Transaction_Date: '08/18/2018' }
];