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>

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

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

我收到一条错误消息：

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

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

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

Answer 2

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

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

然后您可以(ngModel)]="thedata.name"

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

2 个答案: