Javascript 显示角度为5的未定义duing ngOninit的对象数组

即使我试图像这样访问html内部，它也没有任何价值

  <mat-nav-list>
      <a mat-list-item href="" *ngFor="let link of products"> {{ link.name }} </a>
   </mat-nav-list>

这是我的JSON

[{"id":215,"name":"Book ambulance","slug":"book-ambulance","permalink":"http://staging.drmedapp.com.cp-36.webhostbox.net/demo/product/book-ambulance/","date_created":"2018-02-24T08:31:01","date_modified":"2018-02-24T08:32:13","type":"simple","status":"publish","featured":false,"catalog_visibility":"visible","description":"","short_description":"","sku":"","price":"0","regular_price":"0","sale_price":"","date_on_sale_from":"","date_on_sale_to":"","price_html":"<span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#8377;</span>0.00</span>","on_sale":false,"purchasable":true,"total_sales":0,"virtual":false,"downloadable":false,"downloads":[],"download_limit":-1,"download_expiry":-1,"download_type":"standard","external_url":"","button_text":"","tax_status":"taxable","tax_class":"","manage_stock":false,"stock_quantity":null,"in_stock":true,"backorders":"no","backorders_allowed":false,"backordered":false,"sold_individually":false,"weight":"","dimen

[{“id”：215，“name”：“Book救护车”，“slug”：“Book救护车”，“permalink”：”http://staging.drmedapp.com.cp-36.webhostbox.net/demo/product/book-ambulance/“，”创建日期“：”2018-02-24T08:31:01“，”修改日期“：”2018-02-24T08:32:13“，”类型“：”简单“，”状态“：”发布“，”特色“：”假“，”目录“：”可见性“，”可见“，”说明“，”，“short_description:”“sku:”“price:”“0”，“regular_price:”“0”，“sale_price:”“date_on_sale:”“from:”“date_on_sale:”“to:”“price_html:”“0.00”，“on_sale:”“false”，“Purchable:”“true”，“total_sales:”“0”，“virtual:”“false”，“download_limit:”“false”，“download_limit:”，“download_Expiration:-1”，“download_-1”，“download-type:”“standard”，“Exteriod”，“external_-url:”按钮文本“：”税务状态“：”应税“，”税务类别“：”管理库存“：”假“，”库存“：”空“，”库存“：”真“，”缺货“：”否“，”允许缺货“：”假“，”缺货“：”假“，”单独售出“：”假“，”重量“：”迪蒙

这是我的.ts文件，我更新了代码，但仍然收到错误。未定义此产品

import { Component, OnInit } from '@angular/core';
import {Headers, Http, RequestOptions, URLSearchParams} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import * as WC from 'woocommerce-api';
import { WooApiService } from 'ng2woo';
import * as CryptoJS from 'crypto-js';

@Component({
  selector: 'app-pcat',
  templateUrl: './pcat.component.html',
  styleUrls: ['./pcat.component.scss']
})
export class PcatComponent implements OnInit {
  WooCommerce: any;
  public products: any;
  data: any;
  public crypto: any;
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  constructor(private woo: WooApiService) {}

  public getALL(){
    this.woo.fetchItems('products')
      .then(products => {
         for(var i = 0; i < products.length; i++) {
            this.products.push(products[i])
         }
      })
      .catch(error => console.log(error));
    } 
  ngOnInit(): void  {
    this.getALL();
  }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/Http”导入{Headers，Http，RequestOptions，URLSearchParams}；
导入“rxjs/add/operator/toPromise”；
从“woocommerce api”导入*作为WC；
从“ng2woo”导入{WooApiService}；
从“crypto js”导入*作为CryptoJS；
@组成部分({
选择器：“应用程序pcat”，
templateUrl:“./pcat.component.html”，
样式URL:['./pcat.component.scss']
})
导出类PcatComponent实现OnInit{
商业：任何；
公共产品：任何；
资料：有；
公开密码：任何；
鞋的类型=[“靴子”、“木屐”、“懒汉鞋”、“软呢帽”、“运动鞋”]；
构造函数（私有woo:WooApiService）{}
公共getALL（）{
this.woo.fetchItems（'products'））
。然后（产品=>{
对于（变量i=0；iconsole.log（错误））；
} 
ngOnInit（）：void{
这个。getALL（）；
}
}

您需要将

产品

属性填充到当前响应中

public getALL(){
    this.woo.fetchItems('products')
    .then(products => { this.products = products; })
    .catch(error => console.log(error));
} 

---

我认为问题在于您没有将

getAll（）

函数的返回值分配给

产品

数组

    public getALL(){
         this.woo.fetchItems('products')
           .then(products => {
              for(var i = 0; i < products.length; i++) {
                 this.products.push(products[i])
              }
           })
           .catch(error => console.log(error));
    } 

public getALL（）{
this.woo.fetchItems（'products'））
。然后（产品=>{
对于（变量i=0；iconsole.log（错误））；
} 

看起来，当您进行API调用时，产品是动态加载的。在API调用完成之前，属性Products将保留灌输值，该值是

未定义的

public products: any;

在产品加载之前，模板不知道这是一个数组，这就是模板失败的地方。现在修复使用空数组初始化属性

public products: any[] = [];

简而言之，这就是初始化的问题。

---

希望这对您有所帮助

谢谢您的回复。谢谢您的回复。我可以看到您的.ts文件中有什么吗？我在主要问题中添加了.ts文件，请确认

WooApiService

有回复吗？尝试

console.log（产品）

如果它有响应。如果您确认它有响应，则尝试更改您的

产品

变量数据类型。到

公共产品：Array=[]

如果仍然没有收到数据，则返回给我。另外，尝试移动

getAll（）

函数并将其放在

ngOnInit（）函数之后。：）