Здравствуйте, я делаю проект базы данных по пивной бар пьяница.Я выполняю запрос к своей базе данных и использую angular для отображения его на локальном веб-сайте хоста.Я вижу, что запрос выполняется и получает результаты.Для данного пьющего я запускаю запрос, который получает все транзакции, которые они сделали на разных барах, поэтому все, что я пытаюсь отобразить, это транзакции данного человека.Я создаю все правильно, как я вижу, когда я использую почтальон, и даже вижу это в запросе на вкладке сети под элементом inspect на локальном хосте.Я даже могу распечатать элемент на странице, но как только я пытаюсь напечатать внутри таблицы в моем HTML, это не работает, и я не могу понять, почему, я попробовал то, что чувствую, как все, когда я смотрю вверх, но это не такпохоже, работает, я бы очень признателен за любую помощь, спасибо.
Это код в моем database.py под моим сервером я бегу
def get_drinker_trans(name):
with engine.connect() as con:
query = sql.text(
"select b1.id, b1.bar, t1.item, b1.time, b1.date, t1.count, s1.price from Bills b1, Transactions t1, Sells s1 where b1.drinker = :name and t1.item in (select item from Beers) and b1.id = t1.bill and s1.bar = b1.bar and s1.item = t1.item order by b1.date"
)
rs = con.execute(query, name = name)
results = [dict(row) for row in rs]
for r in results:
r['price'] = float(r['price'])
for r in results:
r['count'] = int(r['count'])
return results
Это приложение маршрутизации в моем init.py на моем сервере
@app.route("/api/drinkers/<name>", methods=["GET"])
def get_drinker_trans(name):
try:
if name is None:
raise ValueError("Drinker not not found")
return jsonify(database.get_drinker_trans(name))
except ValueError as e:
return make_response(str(e), 400)
except Exception as e:
return make_response(str(e), 500)
Мой модуль маршрутизации приложений
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { BarDetailsComponent } from './bar-details/bar-details.component';
import { BeersComponent } from './beers/beers.component';
import { DrinkersComponent } from './drinkers/drinkers.component';
import { DrinkerDetailsComponent } from './drinker-details/drinker-details.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'bars'
},
{
path: 'bars',
pathMatch: 'full',
component: WelcomeComponent
},
{
path: 'bars/:bar',
pathMatch: 'full',
component: BarDetailsComponent
},
{
path: 'beers',
pathMatch: 'full',
component: BeersComponent
},
{
path: 'drinkers',
pathMatch: 'full',
component: DrinkersComponent
},
{
path: 'drinkers/:drinker',
pathMatch: 'full',
component: DrinkerDetailsComponent
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] }) export class AppRoutingModule { }
Файл моего сервиса поения, в котором я говорю, что такое транзакция, и состоит из
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LocationChangeListener } from '@angular/common';
export interface Transaction{
bar: string;
count: number;
date: string;
id: string;
item: string;
price: number;
time: string; }
@Injectable({
providedIn: 'root' })
export class DrinkersService {
constructor(private http: HttpClient) { }
getDrinkers(){
return this.http.get<any[]>('/api/drinker')
}
//getDrinker(drinker:string){
// return this.http.get<any[]>('/api/drinker/' + drinker)
//}
get_Trans(drinker:string){
return this.http.get<Transaction[]>('/api/drinkers/' + drinker);
} }
Компонент сведений о моем потребителе
import { Component, OnInit } from '@angular/core';
import { DrinkersService, Transaction } from '../drinkers.service';
import { ActivatedRoute } from '@angular/router';
import { HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-drinker-details',
templateUrl: './drinker-details.component.html',
styleUrls: ['./drinker-details.component.css'] })
export class DrinkerDetailsComponent implements OnInit {
drinkerName : string;
//drinkerDetails : any[];
trans: Transaction[];
constructor(
public drinkerService: DrinkersService,
public route: ActivatedRoute,
) {
this.route.paramMap.subscribe((paramMap) => {
this.drinkerName = paramMap.get('drinker');
/*drinkerService.getDrinker(this.drinkerName).subscribe(
data =>{
//this.drinkerDetails = data;
},
(error: HttpResponse<any>) => {
if (error.status === 404){
alert('Dinker not found');
}
else{
console.error(error.status + '-' + error.body);
alert('error occurred on the server. please check the browser console');
}
}
);*/
this.drinkerService.get_Trans(this.drinkerName).subscribe(
data => {
this.trans = data;
},
(error: HttpResponse<any>) => {
if (error.status === 404){
alert('Drinker not found');
}
else{
console.error(error.status + '-' + error.body);
alert('error occurred on the server. please check the browser console');
}
}
);
}); }
ngOnInit() {
}
}
Мой HTML-код, где я могу получить доступ к массиву вне таблицы, но я пробовал циклы и другие вещи, но он не работает
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"></h1>
<p class="drinker-details"></p>
</div>
<br>
{{trans[0].bar}}
<br>
<div class="container">
<h2 class="text-center font-weight-light">Transactions</h2>
<br>
<p-table [value]="Transactions">
<ng-template pTemplate="header">
<tr>
<th>Bar</th>
<th>Count</th>
<th>Date</th>
<th>ID</th>
<th>Item</th>
<th>Price</th>
<th>Time</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-trans>
<tr>
<td>{{trans.bar}}</td>
<td>{{trans.count}}</td>
<td>{{trans.date}}</td>
<td>{{trans.id}}</td>
<td>{{trans.item}}</td>
<td>{{trans.price}}</td>
<td>{{trans.time}}</td>
</tr>
</ng-template>
</p-table>
Картинки того, как это выглядит, когда я запускаю его
Показывает, чточто один элемент отображается, но может отображаться в таблице
, когда я щелкаю правой кнопкой мыши и проверяю элемент и перехожу к сетевой таблице и получаю GET наперсона Аарона Роджерса и возвращаемые результаты запроса
