时间戳

首页 > 解决方案 > 将ngmodel添加到离子应用程序无法显示

angular - 将ngmodel添加到离子应用程序无法显示

问题描述

这是我的html页面：

<ion-header>
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form (ngSubmit)="addInfo()"></form>
    <ion-item>
      <ion-label color="primary" floating>الاسم الاول </ion-label>
      <ion-input [(ngModel)]="personal_info.first_name" name="first_name"></ion-input>
    </ion-item>
    <button ion-button type="submit" block>Add Todo</button>
  </form>
</ion-content>

和.ts

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

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
  public personal_info : {};

  constructor() { }

  ngOnInit() {
  }
  addInfo() {
    console.log(this.personal_info)
  }
}

如果我不包含 ng 模型，该页面可以正常工作，但是上面的代码我没有错误&它没有显示

标签： angularformsionic-frameworkngmodel

解决方案

如果你想使用 ngModel 你必须将 FormModule 导入到你的 module.ts 文件中：

import { FormsModule } from '@angular/forms';

@NgModule({
imports: [
  FormsModule,
],
...

推荐阅读