我不熟悉 Angular、Typescript 并将其用于 Ionic。我想在 bms MySQL 数据库的 transactions 表的 total 列中显示单个内容。我想知道 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
})
})
})
}
报告.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>
如果我可能包含了错误的标签，我深表歉意，但如果有人能为我指明执行此输出的正确方向，我们将不胜感激。
编辑:
尝试编辑一些点:
报告.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>
它只是循环，也许我遗漏了什么或不正确的字符串输出
最佳答案
考虑到您当前的情况，您将按以下方式打印表格 -
所以，如果我没答错你的问题，你需要在你的表中动态打印 Purchase Cost 下的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 - 显示来自 MySQL 数据库的单个条目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54417880/