Ionic 2 - TypeScript | 填充一组接口对象

Question

在问这个问题之前,我确实做了我的功课,我相信你们中的一些人会发现它很愚蠢,但我仍然对新闻稿有点新意,而且我完全在努力解决这个问题.

我有一个界面:

export interface Product {
  name?: string;
  image_rul?: string;
  description?: string;
  price?: number;
  quantity?: number;
}

我正在尝试创建一个Product类型的数组,并用随机值填充该数组.

为了进一步解释我自己,我在做什么:

export class HomePage {
  products: Product[];
  constructor(public navCtrl: NavController) {
    for (var i=0; i< 10; i++) {
      var random: number =  Math.floor(Math.random() * 10) + 1;
      this.products[i] = <Product>{
        name: `Test_${i}`,
        image_rul: "https://unsplash.it/200/?random",
        description: "This is a short description",
        price: random,
        quantity: i
      };
    }
    console.log(this.products);
  }
}

当我运行这个时,我收到一个错误:

polyfills.js:3 Error: Uncaught (in promise): Error: Error in ./HomePage class HomePage_Host - inline template:0:0 caused by: Cannot set property '0' of undefined(…)

请问你能指引我走向正确的方向吗？我做错了什么或我该如何解决？

非常感谢.

Answer 1

在typecript中定义类成员时:

class A {
    member: string[];
}

它并没有真正在已编译的js代码中创建该成员:

var A = (function () {
    function A() {
    }
    return A;
}());

您需要初始化该成员:

export class HomePage {
  products: Product[];

  constructor(public navCtrl: NavController) {
    this.products = [];
    ...

如果你不那样做,那就会undefined导致你发布的错误.

您也可以在声明成员时执行此操作:

export class HomePage {
  products: Product[] = [];

这将产生相同的精确js代码.