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" }]    
}

homepage.ts

newList: List = new List();

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

仅强制转换{}对象不会添加接口属性。

来自TypeScript

类型断言与其他语言中的类型转换一样，但是不执行任何特殊检查或数据重组。它对运行时没有影响，并且仅由编译器使用。

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

1 个答案: