ionic入門之資料綁定顯示-1

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/inforstack/article/details/71270393

[(ngModel)]是一個Angular文法，用于把hero.name綁定到輸入框中。 它的資料流是雙向的：從屬性到輸入框，并且從輸入框回到屬性。

如果将NgModel使用之後，程式崩潰了。 打開浏覽器的控制台，如果看到："ngModel ... isn't a known property of input."（ngModel不是input元素的已知屬性）

雖然NgModel是一個有效的Angular指令，但它預設情況下是可用的。 它屬于可選子產品FormsModule。 如果不可用,那麼我們必須在app.module.ts中引入FormsModule子產品。

<ion-content padding>
  <div>
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
  </div>
</ion-content>
           

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };  
}