ng中的ngModal和数据绑定

时间:2017-03-13 21:49:18

标签: angular data-binding

我是角度2的新手,我面临着双向数据绑定的问题,即我在html文件中使用数据绑定时页面无法加载 html文件,当我评论[(ngModel)] =“myusername”页面正常加载,但当我取消注释它没有数据被绑定页面不加载(我从app.module.ts中的@ angular / forms模块导入FormsModule )

<div class="app flex-row align-items-center">
<div class="container">

<div class="row justify-content-center">
    <img src="assets/img/logo.png" alt="logo" style=" margin-
               bottom:2%;width:160px;height:160px;" align="middle" > 


</div>
<div class="row justify-content-center">
  <div class="col-md-8">

    <div class="card-group mb-0">
      <div class="card p-2">
        <div class="card-block">
          <h1 style="color:rgb(65,146,195);">Login</h1>
          <p class="text-muted">Sign In to your account</p>
          <div class="input-group mb-1">
            <span class="input-group-addon"><i class="icon-user"></i></span>
            <input   [(ngModel)]="myusername"  name="username" type="text" class="form-control" placeholder="Username">
          </div>
          <div class="input-group mb-2">
            <span class="input-group-addon"><i class="icon-lock"></i></span>
            <input type="password" class="form-control" placeholder="Password" name="password">
          </div>
          <div class="row">

            <div class="col-6 text-right">
                  <button type="button" class="btn btn-link px-0">Forgot password?</button>
            </div>
              <div class="col-6">
              <button type="button" class="btn btn-primary px-2">Login</button>
            </div>

          </div>

           <div class="row" style="margin-top:2%;">
               <div class="col-6 text-right">
                   <p class="text-muted">Already have an account</p>
                </div>  
                 <div class="col-6 ">
                  <button type="button" class="btn btn-primary px-2 ">Register</button>
                </div>

           </div>

        </div>
      </div>

    </div>
  </div>
</div>

这是我的.ts文件

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

@Component({
templateUrl: 'login.component.html'
})
export class LoginComponent {

  user={
   name:"b"
   ,pass:"b"
}
myusername:string;
mypassword:string;
constructor() { }

}

非常感谢

0 个答案:

没有答案