Ionic 4 绑定输入数据与接口不工作

Question

我在 Ionic 中有如下界面：

// mydata.model.ts
export interface Mydata{
   id: string;
   name: string;
   date: string
}

我想向后端添加新数据，因此我将我的数据绑定到 <ion-input> 内的组件中，如下所示：

// add-data.page.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Mydata } from '../home/mydata.model';

@Component({
  selector: 'app-add-data',
  templateUrl: './add-data.page.html',
  styleUrls: ['./add-data.page.scss'],
})
export class AddDataPage implements OnInit {
  thedata: Mydata;

  constructor(private dk: DataService) { }

  ngOnInit(){


  }

   showData(){
    console.log(this.thedata);
  }
}

这是我的添加数据组件：

<ion-content>
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input [(ngModel)]="thedata.name" name="myname"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Date</ion-label>
    <ion-input [(ngModel)]="thedata.date" name="mydate"></ion-input>
  </ion-item>
  <ion-button padding expand="full" size="medium" (click)="showData()">
    <ion-icon name="add-circle" slot="start"></ion-icon> Add Data
  </ion-button>
</ion-content>

我的问题是为什么数据绑定在这种情况下不起作用？

我的意思是我无法在控制台中打印数据。

我收到一条错误消息：

ERROR TypeError: Cannot read property 'name' of undefined.

但是，如果我用字符串类型数据更改 [(ngModel)] 的值，我可以在控制台中打印数据。因此，为了让我的问题更清楚，在 Angular 中将输入数据与接口绑定的正确方法是什么？

Answer 1

您需要初始化接口才能在模板中绑定，例如：

thedata : Mydata =
{
  id     : "1",
  name   : "john",
  date   : "01/02/2019"
}

那么你可以(ngModel)]="thedata.name"

Answer 2

您需要初始化对象以使用键，或者您可以将 class 与构造函数一起使用。

第一种方式：

    // mydata.model.ts
export class Mydata{
   id: string;
   name: string;
   date: string
   constructor(){
      this.id = "";
      this.name = "";
      this.date = "";
   }
}

在你的 component.ts

theData: MyData = new MyData()

第二种方式：

// mydata.model.ts
export interface Mydata{
   id: string;
   name: string;
   date: string
}

在你的component.ts

theData: MyData = {id="", name: "", date: ""};

Ionic 4 绑定输入数据与接口不工作

Ionic 4 binding input data with interface not working

ionic-framework

ngmodel

angular

ionic4