显示MySQL数据库中的单个条目

total 列 transactions 我的桌子 bms MySQL数据库。我想知道什么是HTML端的查询或格式。

报告.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { ModalReportsProfitsRankingsPage } from '../modal-reports-profits-rankings/modal-reports-profits-rankings';
import { HTTP } from '@ionic-native/http';
import { HelperProvider } from '../../providers/helper/helper';
import { PassportProvider } from '../../providers/passport/passport';

@IonicPage()
@Component({
  selector: 'page-reports',
  templateUrl: 'reports.html',
})
export class ReportsPage {

  oauthToken: any
  productList: any
  loader: string = 'show'
  reports: any
  reportList: Array<{
    name: string
  }>
  reportListFiltered: any
  query: string

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public http: HTTP,
    public helper: HelperProvider,
    public passport: PassportProvider
    ) {
    this.reportList = []
    this.reportListFiltered = []
    this.passport.oauthToken(
      this.helper.getApi(),
      1,
      this.helper.GetclientSecret()
    ).then(data => {
      this.oauthToken = JSON.parse(data.data)
      this.loadReports()
    })
  }

  loadReports() {
    this.http.get(this.helper.getApi() + '/api/store-reports', {}, {
      'Accept': 'application/json',
      'Authorization': 'Bearer ' + this.oauthToken.access_token
    }).then(data => {
      let res = JSON.parse(data.data)
      this.reportList = res.data

      this.reportList.forEach(element => {
        let tmp = element
        this.reportListFiltered.push({
          invoice_no: tmp.invoice_no,
          type: tmp.type,
          payment: tmp.payment,
          exchange: tmp.exchange,
          total: tmp.total
        })
      })
    })
  }

<ion-header>
  <ion-navbar hideBackButton>
    <button ion-button menuToggle>
      <span class="lnr lnr-menu"></span>
    </button>
    <ion-title>
      Reports
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div class="fluid big ui buttons">
    <button class="blue ui button">Profits</button>
    <button class="ui button">Expenses</button>
    <button class="ui button">Invoices</button>
  </div>

  <div class="fluid ui card my-5">
    <div class="content">
      <div class="header">Sales report</div>
      <div class="mini fluid basic ui buttons my-3">
        <button class="ui button">Day</button>
        <button class="ui button">Week</button>
        <button class="ui button">Month</button>
      </div>
      <div class="description">
        <table class="unstackable ui celled table">
          <tbody>
            <tr>
              <td>
                Purchase cost:
                <br>
                <small>
                  P555 <!-- This is where I want to print the total -->
                </small>
              </td>
              <td>
                Gross sales:
                <br>
                <small>
                  P36,020
                  (P10,000)
                </small>
              </td>
            </tr>
            <tr>
              <td>
                Expenses:
                <br>
                <small>
                  P36,020
                </small>
              </td>
              <td>
                Gross profit:
                <br>
                <small>
                  P36,020
                </small>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="extra content">
      <span class="right floated" (click)="showModalReportsProfitsRankings()">
        View rankings <i class="chevron right icon"></i>
      </span>
    </div>
  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col>
          <h4 class="my-3 text-center">December 23 - February 25</h4>
          <div class="big fluid ui icon buttons">
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

报告.ts

export class ReportsPage {

  oauthToken: any
  reportList: any
  loader: string = 'show'
  reportListFiltered: any
  query: string

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public modalCtrl: ModalController,
    public http: HTTP,
    public helper: HelperProvider,
    public passport: PassportProvider
    ) {
    this.reportListFiltered = []
    this.passport.oauthToken(
      this.helper.getApi(),
      1,
      this.helper.GetclientSecret()
    ).then(data => {
      this.oauthToken = JSON.parse(data.data)
      this.loadReports()
    })
  }

  loadReports() {
    this.http.get(this.helper.getApi() + '/api/store-products/1', {}, {
      'Accept': 'application/json',
      'Authorization': 'Bearer ' + this.oauthToken.access_token
    }).then(data => {
      let res = JSON.parse(data.data)
      this.loader = 'hide'
      this.reportList = res.data
      console.log(this.reportList)

      this.reportList.forEach(element => {
        let tmp = element
        this.reportListFiltered.push({
          invoice_no: tmp.invoice_no,
          type: tmp.type,
          payment: tmp.payment,
          exchange: tmp.exchange,
          total: tmp.total,
          store_id: tmp.store_id,
          user_id: tmp.user_id
        })
      })
    })
  }

}

报表.html

    <table class="unstackable ui celled table">
      <tbody>
        <tr *ngFor="let report of reportListFiltered">
          <td>
            Purchase cost:
            <br>
            <small>
              {{ report.total }}
              <!-- Does't output anything -->
            </small>
          </td>
          <td>
            Gross sales:
            <br>
            <small>
              P36,020
              (P10,000)
            </small>
          </td>
        </tr>
        <tr>
          <td>
            Expenses:
            <br>
            <small>
              P36,020
            </small>
          </td>
          <td>
            Gross profit:
            <br>
            <small>
              P36,020
            </small>
          </td>
        </tr>
      </tbody>
    </table>

它只是循环,也许我遗漏了什么或不正确的字符串输出