當ngModel被添加到模板中時，角度分量加載多個時間

我試圖創建角度表單。我已經引用了該角度模塊中的表單。當ngModel被添加到模板中時，角度分量加載多個時間

問題是，當我在輸入文本框中添加ngModel時，角度組件在頁面中加載多次。

以下爲模塊代碼

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 { 
}

以下是在角分量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; 
    } 
}

：

<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德爾，它工作正常。

來源

2017-09-22 Shan Khan

你的意思是，它加載了多次？哪裏？你在哪裏聲明HeaderProfileComponent存在？請重新創建一個示例plnkr以幫助我們爲您提供幫助。 –

HeaderProfileComponent添加到第一個代碼塊中的模塊類中。 –

該行爲是由於我使用的主題。主題處理異常，永遠不會拋出控制檯，所以角度嘗試加載組件，即使異常導致此行爲。

刪除代碼塊，讓瀏覽器的角度投擲顯示輸入應該包含ngModel name屬性，添加屬性 - >固定

來源

2017-09-25 15:13:31

當ngModel被添加到模板中時，角度分量加載多個時間

回答

相關問題