Ionic 4 привязки входных данных с интерфейсом не работает - PullRequest
Новая
       17

Ionic 4 привязки входных данных с интерфейсом не работает

0 голосов
/ 21 марта 2019

У меня есть следующий интерфейс в 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);
  }
}

А вот мои компоненты add-data: 

<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?

Ответы [ 2 ]

1 голос
/ 21 марта 2019

вам нужно инициализировать объект для использования ключей или вы можете использовать класс с конструктором.

Первый способ: 

    // 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: ""};
0 голосов
/ 21 марта 2019

Вам нужно инициализировать интерфейс, чтобы можно было связать его в шаблоне, например: 

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

Затем вы можете сделать (ngModel)]="thedata.name"

...