テンプレートにngModelが追加されたときに、角度成分が複数回読み込まれる

Question

角形を作成しようとしています。 私はその角度モジュールでフォームを参照しました。

問題は、入力テキストボックスにngModelを追加すると、角度コンポーネントがページに複数回読み込まれることです。

<form (ngSubmit)="createUser()" class="m-form m-form--fit m-form--label-align-right"> 
            <input class="form-control m-input" type="password" [(ngModel)]="newUser.FirstName" > 

    </form> 

温家宝首相は、私はmgNoなしのみ追加：

後は、角度成分のHTMLで部品コード

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { Helpers } from '../../../../../helpers'; 
import { UserService } from '../../../../../_services/user.service'; 
import { ApplicationUser } from '../../../../../Entities/UserDetail'; 

@Component({ 
    selector: ".m-grid__item.m-grid__item--fluid.m-wrapper", 
    templateUrl: "./header-profile.component.html", 
    encapsulation: ViewEncapsulation.None, 
}) 
export class HeaderProfileComponent implements OnInit { 
    appUser: ApplicationUser = null; 
    newUser: ApplicationUser = null; 
    constructor(private _userService: UserService) { 
     this.appUser = new ApplicationUser(); 
     this.newUser = new ApplicationUser(); 
    } 
    ngOnInit() { 
     this._userService.getCurrentUser() 
      .subscribe((data: ApplicationUser) => { 
       this.appUser = data; 
      }, (err: Response) => { 

      }); 
    } 
    createUser(){ 
     debugger; 
    } 
} 

次モジュールコード

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HeaderProfileComponent } from './header-profile.component'; 
import { LayoutModule } from '../../../../layouts/layout.module'; 
import { DefaultComponent } from '../../default.component'; 
import { FormsModule } from "@angular/forms"; 
import { BrowserModule } from '@angular/platform-browser'; 
import { UserService } from '../../../../../_services/user.service'; 
const routes: Routes = [ 
    { 
     "path": "", 
     "component": DefaultComponent, 
     "children": [ 
      { 
       "path": "", 
       "component": HeaderProfileComponent 
      } 
     ] 
    } 
]; 
@NgModule({ 
    imports: [ 
     FormsModule,CommonModule, RouterModule.forChild(routes), LayoutModule 
    ], exports: [ 
     RouterModule 
    ], declarations: [ 
     HeaderProfileComponent 
    ],providers:[ 
     UserService 
    ] 
}) 
export class HeaderProfileModule { 
} 

されていますデル、それはうまく動作します。

Answer 1

この動作は、私が使用していたテーマに起因しています。 テーマは例外を処理してコンソールに投げ込まれないので、例外がこの動作を引き起こした後でもコンポーネントがロードされました。

は、コードブロックを削除し、ブラウザの角投げが入力属性の追加、ngModelとname属性を含める必要があります示してみましょう - あなたはそれが複数回ロードするわけにはどうすればよい>固定