时间戳

首页 > 解决方案 > Ionic 4绑定输入数据与接口不起作用

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

问题描述

我在 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中将输入数据与接口绑定的正确方法是什么？

标签： angularionic-frameworkionic4ngmodel

解决方案

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

第一种方式：

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

推荐阅读