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

Posted 2023-03-13

【中文标题】离子 2 - 打字稿 |填充接口对象数组

【英文标题】：Ionic 2 - TypeScript | Populate an array of interface objects

【发布时间】：2017-02-26 10:48:24

【问题描述】：

在问这个问题之前我确实做了功课，我相信你们中的一些人会觉得它很愚蠢，但我对 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(…)

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

非常感谢。

【问题讨论】：

可能重复：***.com/questions/10673237/…

【参考方案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 代码。

【讨论】：

天哪！一直都是这样......非常感谢！