На одной странице я хочу сделать две таблицы во вкладках.Вкладки работают нормально.Если я комментирую любую из таблиц в html, то загружается одна таблица, и я пытаюсь получить данные с consol.table, данные также работают, но в html выдает ошибку:
Material Anguler Mutlipletable dataSource + Material Anguler Mutliple table в одном шаблоне 'Не удалось найти столбец с идентификатором'
// таблица 1
<table mat-table [dataSource]="dataSource" class="table" matSort></table>
// таблица 2
<table mat-table [dataSource]="dataSource2" class="table" matSort></table>
// файл TS Код для материала 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' }
];