亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何讀取html模板中的數據數組

如何讀取html模板中的數據數組

RISEBY 2022-01-01 20:14:39
我有三個變量,我創建了一個數組并將所有這三個變量推送到這個數組中。在我的 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.tsimport { 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>
查看完整描述

3 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

從您的 html 代碼中,我認為您需要一個對象數組。例如 :


array = [

    {key: 'key1', title: 'title 1', price: 10, },

    {key: 'key2', title: 'title 2', price: 10, },

    {key: 'key3', title: 'title 3', price: 10, }

]

如果我的假設是正確的,那么這里有幾個問題。

  1. 數組構造不行。

  2. 您的數組變量是本地的。將其設為公共變量,否則無法從 html 訪問它。

  3. 在 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({

  selector: 'app-admin-products',

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

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

})

export class AdminProductsComponent{

  array: any = [];

  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;

        this.array.push({"key":key, "title":title, "price":price });

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

    })    

  }

}

并將您的 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>


查看完整回答
反對 回復 2022-01-01
?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

像這樣嘗試:

  • 有循環tr而不是td

  • 將 {{array.title}} 改為 {{p.title}}

  • array全球

.html


<tbody>

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

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

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

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

    </tr>

</tbody>

.ts


export class AdminProductsComponent{

     array:any[] = [];

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

            let data = c.val();

            let key = c.key;

            let price = data.price;

            let title = data.title;

            this.array=[];

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

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

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

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

        })  

}


查看完整回答
反對 回復 2022-01-01
?
慕姐8265434

TA貢獻1813條經驗 獲得超2個贊

在您的組件中定義一個數組屬性并將對象傳遞給它。對 on 回調使用 Arrow 函數,這樣你的 this 上下文就是組件。


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{

  // Define property here

  public array = [],


  constructor(

    private products:ProductsService,

    private db : AngularFireDatabase

    ) { 

    products.getAll().on('child_added',(c) => {

        let data = c.val();

        let key = c.key;

        let price = data.price;

        let title = data.title;

        this.array.push({key, title, price});

    })    

  }

}


查看完整回答
反對 回復 2022-01-01
  • 3 回答
  • 0 關注
  • 298 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號