Как привязать массив объектов к представлению в ionic 4? - PullRequest
Новая
       13

Как привязать массив объектов к представлению в ionic 4?

0 голосов
/ 26 марта 2019

Я учусь работать с Ionic 4 Framework. Я получил жестко закодированный массив объектов, как это: 

   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>

Когда я запускаю приложение, оно не показывает значения в полях ввода. Также он не регистрирует массив объектов. Что я делаю неправильно?

1 Ответ

0 голосов
/ 26 марта 2019

Нельзя указывать значения в интерфейсе TypeScript.Вам нужно будет сделать его классом. 

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

homepage.ts 

newList: List = new List();

Это позволит вам затем перебирать значения в новом объекте List.

Простое приведение вашего объекта {} не добавит свойства интерфейса.

С TypeScript

Утверждение типа похоже на приведение типа в другомязыки, но не выполняет никакой специальной проверки или реструктуризация данных .Он не влияет на время выполнения и используется исключительно компилятором.

...