HTML表格内的Cant访问数组元素

时间：2018-11-17 18:19:26

标签： html angular html-table

你好，我正在做关于酒吧啤酒饮用者的数据库项目。我正在数据库上运行查询，并使用angular将其显示在本地主机网站上。我可以看到查询执行并获得结果。对于给定的饮酒者，我运行一个查询，以获取他们在各个酒吧进行的所有交易，因此，我试图显示的只是给定人的交易。我可以正确创建所有内容，因为使用邮递员时可以看到它，甚至可以在本地主机上的inspect元素下的network选项卡中的请求中看到它。我什至可以在页面上打印出一个元素，但是一旦我尝试以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>

  

我运行它时的外观图片

Shows that that one element being displayed but can display in table

when i right click and do inspect element and go to network table and have the GET on the person Aaron Rodgers and the return results of the query

2 个答案:

答案 0 :(得分：1)

尝试替换行

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

使用

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

答案 1 :(得分：0)

在组件中，数据没有正确分配。

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');
      }
    }
  );
相关问题
最新问题