**I want to show my data in a mat table. I have tried many ways. Which is the most useful way?
The data is shown in console.log.
**
-SERVİCE COMP..
export class DataService implements OnInit, OndestroY {
…
<code> todayrss = new BehaviorSubject<Map<String, RssModel[]>>(undefined);
</code>
<code> todayrss = new BehaviorSubject<Map<String, RssModel[]>>(undefined);
</code>
todayrss = new BehaviorSubject<Map<String, RssModel[]>>(undefined);
…
}
COMPONENT.TS—-
<code>export class ThirdTabComponent {
dataSource: any[] = [];
displayedColumns: string[] = ['poiName', 'taskName'];
constructor(private dataService: DataService) {
this.dataService.todayrss.subscribe(data => {
if (data && data.size > 0) {
console.log('TODAY RSS', data);
}
});
}
...
}
</code>
<code>export class ThirdTabComponent {
dataSource: any[] = [];
displayedColumns: string[] = ['poiName', 'taskName'];
constructor(private dataService: DataService) {
this.dataService.todayrss.subscribe(data => {
if (data && data.size > 0) {
console.log('TODAY RSS', data);
}
});
}
...
}
</code>
export class ThirdTabComponent {
dataSource: any[] = [];
displayedColumns: string[] = ['poiName', 'taskName'];
constructor(private dataService: DataService) {
this.dataService.todayrss.subscribe(data => {
if (data && data.size > 0) {
console.log('TODAY RSS', data);
}
});
}
...
}
HTML
<code> <table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="poiName">
<th mat-header-cell *matHeaderCellDef> ANAHTAR. </th>
<td mat-cell *matCellDef="let data"> {{data.poiName}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="taskName">
<th mat-header-cell *matHeaderCellDef> Değer </th>
<td mat-cell *matCellDef="let data"> {{data.taskName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</code>
<code> <table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="poiName">
<th mat-header-cell *matHeaderCellDef> ANAHTAR. </th>
<td mat-cell *matCellDef="let data"> {{data.poiName}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="taskName">
<th mat-header-cell *matHeaderCellDef> Değer </th>
<td mat-cell *matCellDef="let data"> {{data.taskName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</code>
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="poiName">
<th mat-header-cell *matHeaderCellDef> ANAHTAR. </th>
<td mat-cell *matCellDef="let data"> {{data.poiName}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="taskName">
<th mat-header-cell *matHeaderCellDef> Değer </th>
<td mat-cell *matCellDef="let data"> {{data.taskName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>