如何將對象數組綁定到離子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" }]    
}

homepage.ts

newList: List = new List();

這將允許您迭代新List對象中的值。

簡單地轉換{}對象不會添加接口屬性。

來自TypeScript

類型斷言類似於其他語言的類型轉換，但不執行特殊的數據檢查或重組 。 它沒有運行時影響，純粹由編譯器使用。