离子 2 - 打字稿 |填充接口对象数组

Question

在问这个问题之前我确实做了功课，我相信你们中的一些人会觉得它很愚蠢，但我对 Typescript 还是有点陌生​​，我完全在努力解决这个问题。

我有一个界面：

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

在 typescript 中定义类成员时：

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 代码。