如何读取html模板中的数据数组

Question

我有三个变量，我创建了一个数组并将所有这三个变量推送到这个数组中。

在我的 html 模板中，我使用了一个表格。我试过 *ngFor 但它不起作用，我也试过字符串插值，但也不起作用。

我收到一个错误，叫做 <--can not read property "title" of undefined-->

在我的控制台中，我正在获取这样的数据....

array of data

(3)[{...}{...}{...}]

0:{key:"-LtZprPfMtDgzuxmaI5o"}

1:{price:1}

2:{title:"title1"}

array of data

(3)[{...}{...}{...}]

0:{key:"-LtcY8_6dd8fzibK9EYV"}

1:{price:2}

2:{title:"title2"}

array of data

(3)[{...}{...}{...}]

0:{key:"-LtcZF9NHknDZ0OcKzHg"}

1:{price:3}

2:{title:"title3"}

这里是我的 product.component.ts

import { ProductsService } from './../../products.service';

import { Component, OnInit } from '@angular/core';

import { AngularFireDatabase, AngularFireAction, DatabaseSnapshot } from 'angularfire2/database';

@Component({

  selector: 'app-admin-products',

  templateUrl: './admin-products.component.html',

  styleUrls: ['./admin-products.component.css']

})

export class AdminProductsComponent{

  constructor(

    private products:ProductsService,

    private db : AngularFireDatabase

    ) { 

    products.getAll().on('child_added',function(c){

        let data = c.val();

        let key = c.key;

        let price = data.price;

        let title = data.title;

        let array=[];

        array.push({"key":key});

        array.push({"title":title});

        array.push({"price":price});

        console.log('array of data',array);

    })    

  }

}

还有我的 admin-products.component.html

<table class="table">

    <thead>

        <th>Title</th>

        <th>Price</th>

        <th></th>

    </thead>

    <tbody *ngFor="let p of array">

        <td>{{p.title}}</td>

        <td>{{p.price}}</td>

        <td ><a [routerLink]="['/admin/products',p.key]">Edit</a></td>

    </tbody>

</table>

Answer 1

从您的 html 代码中，我认为您需要一个对象数组。例如 ：array = [&nbsp; &nbsp; {key: 'key1', title: 'title 1', price: 10, },&nbsp; &nbsp; {key: 'key2', title: 'title 2', price: 10, },&nbsp; &nbsp; {key: 'key3', title: 'title 3', price: 10, }]如果我的假设是正确的，那么这里有几个问题。数组构造不行。您的数组变量是本地的。将其设为公共变量，否则无法从 html 访问它。在 html 中，您正在尝试迭代数组，每次迭代时，数据将分配在您的局部变量中'p'（如您所用*ngFor="let p of array"）所以，把你的代码改成这样import { ProductsService } from './../../products.service';import { Component, OnInit } from '@angular/core';import { AngularFireDatabase, AngularFireAction, DatabaseSnapshot } from 'angularfire2/database';@Component({&nbsp; selector: 'app-admin-products',&nbsp; templateUrl: './admin-products.component.html',&nbsp; styleUrls: ['./admin-products.component.css']})export class AdminProductsComponent{&nbsp; array: any = [];&nbsp; constructor(&nbsp; &nbsp; private products:ProductsService,&nbsp; &nbsp; private db : AngularFireDatabase&nbsp; &nbsp; ) {&nbsp;&nbsp; &nbsp; products.getAll().on('child_added',function(c){&nbsp; &nbsp; &nbsp; &nbsp; let data = c.val();&nbsp; &nbsp; &nbsp; &nbsp; let key = c.key;&nbsp; &nbsp; &nbsp; &nbsp; let price = data.price;&nbsp; &nbsp; &nbsp; &nbsp; let title = data.title;&nbsp; &nbsp; &nbsp; &nbsp; this.array.push({"key":key, "title":title, "price":price });&nbsp; &nbsp; &nbsp; &nbsp; console.log('array of data', this.array);&nbsp; &nbsp; })&nbsp; &nbsp;&nbsp;&nbsp; }}并将您的 html 更改为此，<table class="table">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody *ngFor="let p of array">&nbsp; &nbsp; &nbsp; &nbsp; <td>{{p.title}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>{{p.price}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td ><a [routerLink]="['/admin/products',p.key]">Edit</a></td>&nbsp; &nbsp; </tbody></table>

Answer 2

像这样尝试：有循环tr而不是td将 {{array.title}} 改为 {{p.title}}让array全球.html<tbody>&nbsp; &nbsp; <tr *ngFor="let p of array">&nbsp; &nbsp; &nbsp; &nbsp; <td>{{p.title}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>{{p.price}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td ><a [routerLink]="['/admin/products',p.key]">Edit</a></td>&nbsp; &nbsp; </tr></tbody>.tsexport class AdminProductsComponent{&nbsp; &nbsp; &nbsp;array:any[] = [];&nbsp; &nbsp; &nbsp;products.getAll().on('child_added',function(c){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let data = c.val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let key = c.key;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let price = data.price;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let title = data.title;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.array=[];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.array.push({"key":key});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.array.push({"title":title});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.array.push({"price":price});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('array of data',this.array);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp;&nbsp;}

Answer 3

在您的组件中定义一个数组属性并将对象传递给它。对 on 回调使用 Arrow 函数，这样你的 this 上下文就是组件。import { ProductsService } from './../../products.service';import { Component, OnInit } from '@angular/core';import { AngularFireDatabase, AngularFireAction, DatabaseSnapshot } from 'angularfire2/database';@Component({&nbsp; selector: 'app-admin-products',&nbsp; templateUrl: './admin-products.component.html',&nbsp; styleUrls: ['./admin-products.component.css']})export class AdminProductsComponent{&nbsp; // Define property here&nbsp; public array = [],&nbsp; constructor(&nbsp; &nbsp; private products:ProductsService,&nbsp; &nbsp; private db : AngularFireDatabase&nbsp; &nbsp; ) {&nbsp;&nbsp; &nbsp; products.getAll().on('child_added',(c) => {&nbsp; &nbsp; &nbsp; &nbsp; let data = c.val();&nbsp; &nbsp; &nbsp; &nbsp; let key = c.key;&nbsp; &nbsp; &nbsp; &nbsp; let price = data.price;&nbsp; &nbsp; &nbsp; &nbsp; let title = data.title;&nbsp; &nbsp; &nbsp; &nbsp; this.array.push({key, title, price});&nbsp; &nbsp; })&nbsp; &nbsp;&nbsp;&nbsp; }}