Material Angular Multiple table data Source + Material Angular Multiple table in single template'找不到具有id的列'

Question

在单页中，我想在选项卡中创建两个表格。标签工作正常。如果我在 html 中评论任何表，那么单个表正在加载，我尝试使用 consol.table 获取数据，数据也可以工作，但在 html 中它会给出错误：

Material Anguler Mutliple table dataSource + Material Anguler Mutliple table in single tempte 'Could not find column with id'

//表一

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

//表2

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

//ts文件中Material Anguler的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' }
];

Answer 1

使用此显示格式

表 1

<tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>

表 2

<tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>