![](/img/trans.png)
[英]Passing a Javascript Object (DataTable Columns) to Angular Directive
[英]Angular Material datatable show [object Object]
我正在嘗試使用Express和Firebase DB實現數據表組件。
這是我的服務請求數據的方式
gettext() {
return this.http.get<nomchamp[]>(this.url)
.map(res => { console.log(res); return res });
}
console.log打印:
[{…}]
0: {text: "testoooo"}
length: 1__proto__: Array(0)
我創建了一個模型
export interface nomchamp {
text: String;
}
這是我的數據表組件
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() { }
}
和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>
在我的快速發布路線中,我推送數據對象,然后在獲取路線中調用它
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" }]
);
});
在我的數據表中,我得到了這個預覽
[object Object]
我在這里找到了相同的問題,但是接收到的數據的格式與所討論的不同,因為我沒有數組。這是郵遞員發送的內容
[
{
"text": "testoooo"
}
]
可以通過訂閱將數據從http或其他任何返回可觀察值的服務分配/傳遞到Angular Material Table組件(或其他表示控件)。 參見我的stackblitz示例: 使用Angular Material Table Component和Observable呈現表格數據集 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.