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

Ionic 2 - TypeScript | Populate an array of interface objects

本文关键字：一个 接口 数组 对象 TypeScript 填充 Ionic      更新时间：2023-09-26

在问这个问题之前我真的做了功课，我相信你们中的一些人会觉得这很愚蠢，但我对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(…)
你能给我指个正确的方向吗?我做错了什么，我该怎么做?

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

相关文章：