当我尝试从角度的mat表中打印服务中的值时不起作用。
我已经通过浏览许多网站来尽力而为:
employeecomponent.html
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{elemet.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="mark">
<mat-header-cell *matHeaderCellDef> Mark</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.mark}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
employeecomponent.ts
import {Component, OnInit} from '@angular/core';
import { MatTableDataSource} from '@angular/material';
import { EmployeeService} from '../../shared/employee.service';
@Component({
selector: 'app-employeedashboard',
templateUrl: './employeedashboard.component.html',
styleUrls: ['./employeedashboard.component.css']
})
export class EmployeedashboardComponent implements OnInit{
displayedColumns = ['name', 'mark'];
dataSource = new MatTableDataSource();
constructor(private employeeservice:EmployeeService ) {}
ngOnInit() {
this.employeeservice.getdata().subscribe(
data => {
console.log(data);
this.dataSource.data=data;
},
error => {
console.log('There was an error while retrieving Posts !!!' + error);
}
);
}
}
我希望显示该表,但显示错误,该错误是:
core.js:1440错误错误:尝试区分'ss'时出错。仅允许数组和可迭代 在DefaultIterableDiffer.diff(core.js:7482) 在MatTable.CdkTable._renderRowChanges(table.es5.js:680) 在SafeSubscriber.eval [作为_next](table.es5.js:640) 在SafeSubscriber .__ tryOrUnsub(Subscriber.js:240) 在SafeSubscriber.next(Subscriber.js:187) 在Subscriber._next(Subscriber.js:128) 在Subscriber.next(Subscriber.js:92) 在TakeUntilSubscriber.Subscriber._next(Subscriber.js:128) 在TakeUntilSubscriber.Subscriber.next(Subscriber.js:92) 在BehaviorSubject.Subject.next(Subject.js:56)
在浏览器控制台出现此错误之前,我正在从服务接收值。控制台输出是 {name:“ ss”,mark:10}
我希望此值在我的垫子表中单行显示。