私はAngular2を試していますが、クラスコンストラクタが呼び出されたときに最初にコントローラからの値をHTML入力に取り込むことができませんでした。不思議なことに、ユーザがの後にバインドされたデフォルトデータを入力した場合、ユーザは入力の値を変更しようとします。入力がテキストで事前設定されるようにビューを最初にロードするときに、html入力の値を最初に設定するにはどうすればよいですか?ここで<input> Angular2の値で初期化していません
<div class="row">
<div class="col-md-3">Username:</div>
<div class="col-md-9"><input [(ngModel)]="CurrentUser.Username" /></div>
</div>
<div class="row">
<div class="col-md-3">Password:</div>
<div class="col-md-9"><input [(ngModel)]="CurrentUser.Password" /></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"><button class="btn btn-sm btn-primary" (click)="signin()">Sign in</button></div>
</div>
は、コンポーネント(コントローラ)...参照のために
import {Component} from 'angular2/core'
import {UserService} from '../services/user-current.service';
@Component({
templateUrl: './app/templates/signin.template.html'
})
export class SigninComponent {
private CurrentUser: UserService;
constructor(private userService:UserService) {
this.CurrentUser = userService
}
}
ある
これは、HTMLテンプレートです...、私はロードサービスが含まれています私はhtmlの入力に表示されたいデータ...
import {Injectable} from "angular2/core";
@Injectable()
export class UserService {
private Username = "TEST";
private Password = "Password";
private UserID = 1;
private LoggedIn = true;
constructor() {}
setUser(userObject) {
this.Username = userObject.Username;
this.Password = userObject.Password;
this.UserID = userObject.UserID;
this.LoggedIn = userObject.LoggedIn;
}
}
完全な明快さのために、ここではナビゲーションコンポーネントです(SigninComponentを含む)のビューをロードしているトン...
import {Component} from 'angular2/core'
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'
import {UsersListComponent} from './users-list.component'
import {DashboardComponent} from './dashboard.component'
import {SigninComponent} from './signin.component'
import {UserService} from '../services/user-current.service';
@Component({
selector: 'nav-top',
templateUrl: './app/templates/nav-top.template.html',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/users', name:'UsersList', component: UsersListComponent},
{path: '/signin', name:'Signin', component: SigninComponent},
{path: '/', name:'Dashboard', component: DashboardComponent, useAsDefault: true}
])
export class NavTopComponent{
private CurrentUser;
constructor(private userService:UserService) {
this.CurrentUser = userService
}
}
私は火の問題は、関数内にconsole.log()として火に思えることはありませんngOnInitの使用に関連していないと信じて。 SigninComponentに現在使用しているコードを更新しました... ngOnInitは起動しません。
import {Component,OnInit} from 'angular2/core'
import {UserService} from '../services/user-current.service';
@Component({
selector: 'SigninComponent',
templateUrl: './app/templates/signin.template.html',
providers: [UserService]
})
export class SigninComponent implements OnInit{
public CurrentUser;
constructor(public userService:UserService) {
console.log("constructor");
}
ngOnInit() {
this.CurrentUser = this.userService;
console.log("ngOnInit");
}
}
いいえ。エラーはありません...私はさまざまなチュートリアルのコードをオンラインでコピーしています。私はセレクタとプロバイダのプロパティを追加しましたが、それは違いはありません。 – Craig
@RouteConfigを使用して、SigninComponentがビューとしてロードされています。最も奇妙なのは、htmlの入力値が更新されていることですが、ユーザーがボタンのいずれかの入力に値を入力したときにのみ更新されます。 – Craig
それはplunkerで動作しますが、私のlocalhostでは動作しません – Craig