Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError
Asked on October 07, 2018
import { Component, OnInit } from '@angular/core';
import {IssueService} from '../../issue.service';
import {Router} from '@angular/router';
import {MatTableDataSource} from '@angular/material'
import {Issue} from '../../issue.model';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
issues:Issue[];
displayedColumns:string[]= ['title','responsible','description','severity','status','actions'];
constructor(private issueService:IssueService,private router:Router) { }
ngOnInit() {
this.fetchIssues();
// this.issueService.getIssues().subscribe((issues)=>{
// console.log("issuess ",issues);
// })
}
fetchIssues(){
this.issueService.getIssues().subscribe((data:Issue[])=>{
this.issues=data;
console.log("Data Requested .......................");
console.log("type",typeof this.issues);
console.log(this.issues);
});
}
editIssue(id){
this.router.navigate([`/api/issue/updateIssue/${id}`])
}
deleteIssue(id){
this.issueService.deleteIssue(id).subscribe(()=>{
this.fetchIssues();
})
}
}
<div>
<br>
<mat-card>
<button mat-raised-button color="primary" routerLink="/create">Create New Issue</button>
<br><br>
<mat-divider></mat-divider>
<br>
<table mat-table [dataSource]="issues">
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element">{{element.title}}</td>
</ng-container>
<ng-container matColumnDef="responsible">
<th mat-header-cell *matHeaderCellDef>Responsible</th>
<td mat-cell *matCellDef="let element">{{element.responsible}}</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let element">{{element.description}}</td>
</ng-container>
<ng-container matColumnDef="severity">
<th mat-header-cell *matHeaderCellDef>Severity</th>
<td mat-cell *matCellDef="let element">{{element.severity}}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let element">{{element.status}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let element">
<button mat-button color="primary" (click)="editIssue(element._id)">Edit</button>
<button mat-button color="warn" (click)="deleteIssue(element._id)">Delete</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>
</table>
</mat-card>
</div>
using angular 6 MatTableModule
Unable to display record on web browser ,
anyone knows what am i doing here ,Please help ,thnx in advance
Replied on October 08, 2018
Try
<div *ngIf="issues">
<table mat-table [dataSource]="issues">
------
------
</table>
</div>
