Ionic 4绑定输入数据与接口不起作用答案

【问题标题】：Ionic 4 binding input data with interface not workingIonic 4绑定输入数据与接口不起作用
【发布时间】：2019-03-21 08:06:42
【问题描述】：

我在 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>

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

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

我收到一条错误消息：

错误类型错误：无法读取未定义的属性“名称”。

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

【问题讨论】：

应该是thedata: Mydata;大写“M”
我的错。这是一个错字。仍然无法正常工作。错误还是一样。

标签： angular ionic-framework ionic4 ngmodel

【解决方案1】：

您需要初始化对象以使用键，或者您可以使用带有构造函数的类。

第一种方式：

    // 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: ""};

【讨论】：

【解决方案2】：

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

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

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

【讨论】：