Question

我是Angular，Typescript的新手，并正在将其用于Ionic。我想在total MySQL数据库的transactions表的bms列中显示单个内容。我想知道什么是HTML方面的查询或格式。

reports.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
        })
      })
    })
  }

reports.html

<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>

非常抱歉，如果我添加了错误的标签，但是如果有人可以指出正确的方向，则表示赞赏。

编辑：

试图编辑一些要点：

reports.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
        })
      })
    })
  }

}

reports.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>

它只是循环而已，也许我丢失了某些内容或不正确的字符串输出

Answer 1

考虑到当前情况，您正在按以下方式打印表格-

因此，如果我的问题是对的，则需要在表格的 购买费用 下动态打印total。因此，以下是示例代码-

您的对象数组-

reportListFiltered = [
    {
      invoice_no: 1,
      type: 'type1',
      payment: 'payment1',
      exchange: 'exchange1',
      total: 'total1'
    },
    {
      invoice_no: 2,
      type: 'type2',
      payment: 'payment2',
      exchange: 'exchange2',
      total: 'total2'
    }
]

您的表格摘要为-

<table class="unstackable ui celled table">
    <tbody>
        <tr *ngFor="let report of reportListFiltered">
            <td>
                <tr>
                    <td>
                        Purchase cost:
                        <br>
                        <small>
                            {{ report?.total}}
                            <!-- 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>
            </td>
        </tr>
    </tbody>
</table>

如下所示-

显示来自MySQL数据库的单个条目

1 个答案: