Question

我是角度和云功能的新手。我创建了一个云功能来从Firebase获取数据。它在邮递员中正确回应。

格式如下：

{
    "products": {
        "-L7bnFARTPRbuYbPXnVw": {
            "createdAt": "Thu Mar 15 2018 09:26:09 GMT+0530 (India Standard Time)",
            "image": "https://firebasestorage.googleapis.com/v0/b/sign-up-angular.appspot.com/o/images%2Fbackground1.jpg?alt=media&token=fe96aeab-4f6f-4338-ad08-c3e0da1d610b",
            "likes": 1,
            "pname": "asdf",
            "price": "123"
        },
        "-L7bnJBfADM_PFVnKo4N": {
            "createdAt": "Thu Mar 15 2018 09:26:25 GMT+0530 (India Standard Time)",
            "image": "https://firebasestorage.googleapis.com/v0/b/sign-up-angular.appspot.com/o/images%2Fbackground1.jpg?alt=media&token=fe96aeab-4f6f-4338-ad08-c3e0da1d610b",
            "likes": 0,
            "pname": "asdf",
            "price": "123"
        }
    }
}

我想检索数据并以角度显示。

角度ts＆amp; html文件如下：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';
import { Product } from '../product';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  providers: [ProductService]
})
export class DataComponent implements OnInit {
  products:Product[];
  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.readProducts()
      .subscribe(products =>{
        this.products = products['records']
        console.log(products);
        //On console data are showing properly.
      });
  }
}

HTML：

 <div class="row">
  <div class="col-md-12">

      <!-- HTML table for our list of product records -->
      <table class='table table-hover table-responsive table-bordered'>

          <tr>
              <th>Product</th>
              <th>Price</th>
              <th>Like</th>
              <th>Image</th>
          </tr>

          <!-- Use *ngFor directive to loop throught our list of products. -->
          <tr *ngFor="let product of products">
              <td>{{product.pname}}</td>
              <td>{{product.products.pname}}</td>
              <td>{{product.price}}</td>
              <td>{{product.likes}}</td>
              <td>{{product.image}}</td> 

          </tr>
      </table>
  </div>
</div>

但它没有显示任何数据。

所以请帮助在表格中显示数据。提前谢谢。

Answer 1

谢谢大家。我解决了以下问题，

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  providers: [ProductService]
})
export class DataComponent implements OnInit {
  products: any={};
  items: any=[];

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.readProducts()
      .subscribe(products =>{
        this.products = products['products']

        console.log((Object.values(this.products)));
        this.items = Object.values(this.products);

        console.log("Item data:"+this.items);

      });


  }

}

Answer 2

更改以下行：

this.products = products['records']

到

this.products = products['products']

因为响应格式具有键products。

Answer 3

您的数据不是数组，因此不可迭代。对象只能由其字段遍历。您可以使用Object.keys创建一个阴影数组，然后迭代它。即：

productNames: string[];
products: Product

ngOnOnit() {
    // Code to get the products and stuff
    this.productNames = Object.keys(this.products);
}

然后在HTML

中

<tr *ngFor="let productName of productNames">
    <td>{{products[productName]}}</td>
</tr>

Answer 4

问题来自于产品是一个对象而不是一个数组。

要使用* ngFor迭代您的产品，我建议您将产品转换为数组。

一种简单的方法是使用Object.keys（）来获取产品id并构建类似的数组：

@api.depends('states')
def func():
    # create a message record with appropriate data
    return

我想您仍然需要跟踪产品ID，因此在示例中，我将其添加到产品对象中，然后再将其添加到您的产品数组中。

希望有所帮助

Answer 5

有一个很好的库，可以用来操作JSON文档，它非常小，非常容易学习，只有一个要记住的函数（jmespath.search（obj，filter））。

您可以在其网站上了解更多信息 - http://jmespath.org/或http://ashishuideveloper.in/2017/12/manipulate-json-document-easily-jmespath/

以角度为单位从JSON对象获取子数据

5 个答案: