如何将对象数组绑定到 ionic 4 中的视图？

Question

我正在学习使用 Ionic 4 框架。我有一个像这样的硬编码对象数组：

   export interface List {     

    fields: [{ value1: "Cat", value2: "Dog" }, { value3: "Rabbit", value4: "Horse" }]    
    }

在我的 homepage.ts 文件中，我声明了一个像这样的变量：

newList: List = <List>{};

这是我在 homepage.html

上的代码

  <ion-grid *ngFor="let f of newList.fields">
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-input>{{f.value1}}</ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
          <ion-input>{{f.value2}}</ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-input>{{f.value3}}</ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
          <ion-input>{{f.value4}}</ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>

当我启动应用程序时，它不会在输入字段中显示值。它也不记录对象数组。我究竟做错了什么？

Answer 1

您不能在 TypeScript 界面中指定值。你需要把它变成一个类。

export class List {     
  fields: [{ value1: "Cat", value2: "Dog" }, { value3: "Rabbit", value4: "Horse" }]    
}

主页.ts

newList: List = new List();

这将允许您迭代新 List 对象中的值。

简单地转换您的{} 对象不会添加接口属性。

来自TypeScript

类型断言类似于其他语言中的类型转换，但不执行特殊检查或数据重组。它对运行时没有影响，纯粹由编译器使用。