Я новичок в Angular, Typescript и использую его для Ionic.Я хотел бы отобразить один контент в столбце total таблицы transactions моей базы данных bms MySQL.Я хотел бы знать, что такое запрос или формат на стороне 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
})
})
})
}
отчеты.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>
Это просто циклы, может бытьЯ что-то пропустил или неверный вывод строки 