通过从我的SQLite数据库中获取数据，我使用*ngFor显示了一个项目列表。我可以显示每一件商品的名称、数量、价格和总额。怎样才能让总数排在榜单的末尾？
example picture。
.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
);