由于 ngOninit 在角度 5 中显示未定义的对象数组答案

【问题标题】：Array of object showing undefined duing ngOninit in angular 5由于 ngOninit 在角度 5 中显示未定义的对象数组
【发布时间】：2018-05-29 01:17:59
【问题描述】：

即使我尝试像这样访问 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

这是我的 .ts 文件，我更新了代码但仍然收到错误 this.products is not defined。

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();
  }
}

【问题讨论】：

标签： javascript arrays angular object angular5

【解决方案1】：

我认为您的问题是您没有将 getAll() 函数的返回值分配给您的 products 数组。

    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));
    }

【讨论】：

我可以看看你的 .ts 文件里面有什么吗？
我在主要问题中添加了 .ts 文件，请参阅
您确认WooApiService 有回复了吗？如果有回复，请尝试console.log(products)。然后，如果您确认它有响应，则尝试更改您的 products 变量数据类型。发送至public products: Array<any> = []，如果仍未收到数据，请回复我。
另外，尝试移动您的getAll() 函数并将其放在ngOnInit() 函数之后。 :)
非常感谢您的快速响应，现在可以使用了。

【解决方案2】：

看起来产品是在您进行 API 调用时动态加载的。在 API 调用完成之前，财产产品将保持注入值 undefined，您已按照以下方式进行操作。

public products: any;

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

public products: any[] = [];

总之，看起来这是初始化的问题。

希望对你有帮助

【讨论】：

【解决方案3】：

您需要将 products 属性填充到当前响应中

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

【讨论】：

感谢您的回复。