[英]Angular Material datatable show [object Object]
I'm trying to implement datatable component using Express and Firebase DB. 我正在尝试使用Express和Firebase DB实现数据表组件。
Here's how my service request data 这是我的服务请求数据的方式
gettext() {
return this.http.get<nomchamp[]>(this.url)
.map(res => { console.log(res); return res });
}
console.log prints : console.log打印:
[{…}]
0: {text: "testoooo"}
length: 1__proto__: Array(0)
I have created a model 我创建了一个模型
export interface nomchamp {
text: String;
}
Here's my datatable component 这是我的数据表组件
export class DatatableComponent implements OnInit {
constructor(private dataService: AjouttextService) { }
data = [];
displayedColumns = ['text'];
dataSource = new UserDataSource(this.dataService);
;
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
}
ngOnInit() {
}
}
export class UserDataSource extends DataSource<any> {
constructor(private dataService: AjouttextService) {
super();
}
connect(): Observable<nomchamp[]> {
return this.dataService.gettext()
}
disconnect() { }
}
And html: 和html:
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="text">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
In my express post route I push an object of data then I call it in the get route 在我的快速发布路线中,我推送数据对象,然后在获取路线中调用它
router
.route("/")
.get(function (req, res, err) {
// Get a database reference to our posts
var db = admin.database();
var ref = db.ref("/");
// Attach an asynchronous callback to read the data at our posts reference
ref.on("value", function (snapshot) {
res.send(snapshot.val());
console.log(snapshot.val());
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
});
router
.route("/")
.post(function (req, res, err) {
// Get a database reference to our posts
var db = admin.database();
var ref = db.ref("/");
// Attach an asynchronous callback to read the data at our posts reference
ref.set(
[{ text: "testoooo" }]
);
});
In my datatable I get this preview 在我的数据表中,我得到了这个预览
[object Object]
I have found the same question here but the format of received data is not the same as in question because I don't have an array Here's what postman send 我在这里找到了相同的问题,但是接收到的数据的格式与所讨论的不同,因为我没有数组。这是邮递员发送的内容
[
{
"text": "testoooo"
}
]
It is possible to assign/pass data from http, or any other service that returns an observable, to the Angular Material Table Component (or other presentation control) by subscribing. 可以通过订阅将数据从http或其他任何返回可观察值的服务分配/传递到Angular Material Table组件(或其他表示控件)。 See my stackblitz example: Presenting Tabular Data Sets Using Angular Material Table Component and Observable .
参见我的stackblitz示例: 使用Angular Material Table Component和Observable呈现表格数据集 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.