无法访问html表中的数组元素

你好，我正在做一个关于酒吧啤酒饮用者的数据库项目。我正在数据库上运行一个查询，并使用angular在本地主机网站上显示它。我可以看到查询执行并得到结果。对于一个特定的饮酒者，我运行一个查询，获取他们在不同酒吧进行的所有交易，因此我试图显示的所有交易都是特定人的交易。我正确地创建了所有内容，就像我使用postman时看到的一样，甚至在本地主机上inspect元素下的网络选项卡中的请求中也可以看到它。我甚至可以在页面上打印出一个元素，但一旦我尝试在HTML表格中打印，它就不起作用了，我也不知道为什么，我已经尝试了查找时的所有感觉，但它似乎不起作用，我会非常渴望任何帮助谢谢

这是我正在运行的服务器下my database.py中的代码

这是我的服务器中my init.py中的应用程序路由

@app.route（“/api/drinkers/”，方法=[“GET”]）
def get_drinker_trans（姓名）：
尝试：
如果名称为“无”：
提升值错误（“未找到饮用者”）
返回jsonify（database.get\u drinker\u trans（name））
除ValueError为e外：
返回作出回应（str（e），400）
例外情况除外，如e：
返回作出响应（str（e），500）

我的应用程序路由模块

我的饮酒者服务文件，其中我说明了交易是什么以及交易的组成

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“@angular/common”导入{LocationChangeListener}；
导出接口事务{
酒吧：字符串；
计数：数字；
日期：字符串；
id：字符串；
项目：字符串；
价格：数量；
时间：string；}
@注射的({
providedIn:'root'}）
出口级饮品服务{
构造函数（私有http:HttpClient）{}
酒鬼{
返回this.http.get



在组件中，数据分配不正确

this.drinkerService.get_Trans(this.drinkerName).subscribe(
    data => {
      this.trans = JSON.parse(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');
      }
    }
  );

this.drinkerService.get\u Trans（this.drinkerName）.subscribe(
数据=>{
this.trans=JSON.parse（数据）；
},
（错误：HttpResponse）=>{
如果（error.status==404）{
警报（“未找到饮用者”）；
}
否则{
console.error（error.status+'-'+error.body）；
警报（'服务器上发生错误。请检查浏览器控制台'）；
}
}
);
尝试更换线路

<p-table [value]="Transactions">



与



  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() {
}

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

this.drinkerService.get_Trans(this.drinkerName).subscribe(
    data => {
      this.trans = JSON.parse(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');
      }
    }
  );

<p-table [value]="Transactions">

<p-table [value]="trans">