我是離子和角度的新手。通過從我的 SQLite DB 中獲取資料，我正在使用 *ngFor 顯示專案串列，并且我能夠顯示串列中每個專案的名稱、數量、價格和總計，現在的問題是如何獲得總計串列示例圖片的底部。
這是我的 .html 代碼
<ion-grid>
<ion-row nowrap class="headers">
<ion-col size="5" class="single-border">
Name
</ion-col>
<ion-col size="2" class="single-border">
Price
</ion-col>
<ion-col size="3" class="single-border">
Amount
</ion-col>
<ion-col size="3" class="single-border">
Total
</ion-col>
</ion-row>
<ion-row nowrap class="content" *ngFor="let prod of products | async">
<ion-col size="5"> {{ prod.name }} </ion-col>
<ion-col size="2"> {{ prod.price }} </ion-col>
<ion-col size="3"> {{ prod.amount }} </ion-col>
<ion-col size="3"> {{ prod.total }} </ion-col>
</ion-row >
<ion-row nowrap class="headers">
<ion-col size="5" class="top-border" >
<!-- Name -->
</ion-col>
<ion-col size="2" class="top-border">
<!-- price -->
</ion-col>
<ion-col size="3" class="top-border">
grand amount total
</ion-col>
<ion-col size="3" class="top-border">
grand total
</ion-col>
</ion-row>
</ion-grid>
.ts 檔案
export class ReportPage implements OnInit {
products: Observable<any[]>;
product = {};
constructor(public db: DatabaseService) {}
ngOnInit() {
this.db.getDatabaseState().subscribe((rdy) =>
{
if (rdy) {
this.db.getDevs().subscribe((devs) => {
this.developers = devs;
});
this.products = this.db.getProducts();
this.db.normalProducts();
this.db.repoProduct;
}
});
}
async showRepo(item_date: Date) {
this.db.repoProduct(item_date).then((_) => {
console.log(_);
this.product = {};
});
}
這是資料庫
CREATE TABLE IF NOT EXISTS product(id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT, creatorId INTEGER, price INTEGER, amount INTEGER, total INTEGER NOT NULL);
提前致謝
uj5u.com熱心網友回復：
只需從 HTML 呼叫該方法，您應該查看這個stackblitz 演示以了解我們如何從 observable 陣列中獲取資料，并了解 observables 和 angular 中的主題的概念。
在 .html 檔案中
<ion-col size="3" class="top-border">
grand amount total
</ion-col>
<ion-col size="3" class="top-border">
{{callingfunctionhere()}}
</ion-col>
在 .ts 檔案中
callingfunctionhere() {
let totalall = 0;
// we need to subscribe to products because it is observable, then
//only we will get data
this.products.subscribe((data) => {
totalall = data.reduce((sum, current) => sum current.total, 0);
});
return totalall;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/504173.html
上一篇：注冊電容器推送通知