フォームにアイテムをロードする角度を編集する

Question

私の編集機能に助けが必要です。編集ボタンをクリックすると、フォームにアイテムを読み込む必要があります。これは私のアプリの仕組みです。まず、ユーザーのリストがあり、その特定のユーザーの「詳細を表示」ボタンをクリックすると、新しいページにリダイレクトされます。その新しいページでは、 "編集ボタン"を見つけることになるので、私はそれがオブジェクトであるのでインデックスを持たないので連絡先番号を使って編集機能を選択しようとしています。ただ1つの問題がありますし、フォームを編集する際にアイテムをどのようにロードすることができますか？私はこれが非常に単純な問題だと信じていますが、私はこれについて混乱しています。より良い解決策があれば、私を助けてください。

ユーザdetail.component.ts

export class UserDetailComponent implements OnInit { 

    user: User; 
    id: number; 

    constructor(private userService: UserService, 
       private route: ActivatedRoute, 
       private router: Router) { } 

    ngOnInit() { 
    this.route.params 
    .subscribe((params: Params) => { 
     this.id = +params['id']; 
     this.user = this.userService.getUser(this.id); 
    }); 
} 

    onEditDetail(index: number) { 
    this.router.navigate(['users', this.id, 'edit']); 
    } 

} 

ユーザedit.component.html

<div class="card-block"> 
     <form (ngSubmit)="onUpdateUser(f)" #f="ngForm"> 
     <div class="form-group"> 
      <label for="First Name">First Name</label> 
      <input type="text" class="form-control" [(ngModel)]="user.f_name" name="f_name" ngModel required> 
     </div> 
     <div class="form-group"> 
      <label for="Last Name">Last Name</label> 
      <input type="text" class="form-control" [(ngModel)]="user.l_name" name="l_name" ngModel required> 
     </div> 
     <div class="form-group"> 
      <label for="Contact Number">Contact Number</label> 
      <input type="number" class="form-control" [(ngModel)]="user.contact_no" name="contact_no" ngModel required pattern="^[1-9]+[0-9]*$"> 
     </div>  
     <button class="btn btn-warning pull-right" [disabled]="!f.valid"><i class="fa fa-download" aria-hidden="true"></i> Update</button> 
     </form>  
    </div> 

ユーザedit.component.ts

export class UserEditComponent implements OnInit { 
    @ViewChild('f') editForm: NgForm; 
    user: User; 
    id: number; 


    constructor(private userService: UserService, 
       private route: ActivatedRoute, 
       private router: Router) { } 

    ngOnInit() { 
    this.route.params 
    .subscribe((params: Params) => { 
     this.id = +params['id']; 
     this.user = this.userService.getUser(this.id); 
    }); 
    } 


    onUpdateUser(form: NgForm) { 
     const value = form.value; 
     const updatedUser = new User(value.f_name, value.l_name, value.contact_no); 
     alert("Successfully Updated"); 
     this.router.navigate(['users', this.id]); 
     } 
} 

user.service.ts

import { User } from './user.model'; 
import { Subject } from 'rxjs/Subject'; 
export class UserService { 

usersChanged = new Subject<User[]>(); 

    private users: User[]= [ 
    new User('Harry', 'James', 99999889), 
    new User('Thomas', 'Baker', 99638798) 
    ]; 

    getUsers() { 
    return this.users.slice(); 
    } 

    getUser(index: number) { 
    return this.users[index]; 
    } 

    addUser(user: User){ 
    this.users.push(user); 
    this.usersChanged.next(this.users.slice()); 
    } 

    deleteUser(index: number){ 
    this.users.splice(index, 1); 
    this.usersChanged.next(this.users.slice()); 
    } 

} 

Answer 1

あなたはデータをロードし、すぐにUIからのデータへの変更を反映するために、双方向バインディングを使用することができます。このようにそれを使用すると

import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular 

@NgModule({ 
    imports: [ 
    .... 
    FormsModule // <--- import into the NgModule 
    .... 
    ], 

：

<input type="text" [(ngModel)]="f_name" class="form-control" name="f_name"> 

あなたが持っていると仮定すると

まず、あなたのモジュールにインポートFormsModule：あなたのケースでは、たとえば、あなたはこのようにそれを行うことができますコンポーネント内の変数f_nameは、f_nameの初期値をロードし、更新された値を含みます。

また、双方向バインディングを有効にする正確な[（）]表記に注意してください。

詳細はthis KBを参照してください。

Answer 2

あなたは@mokで述べたように結合ngModelを使用する場合は、あなたの編集コードは、ちょうどあなたの詳細コードのようにすることができますが：

user: User; 

    ngOnInit() { 
    this.route.params 
    .subscribe((params: Params) => { 
     this.id = +params['id']; 
     this.user = this.userService.getUser(this.id); 
    }); 

ユーザープロパティは、自動的に角度の双方向を使用して、フォーム上に表示されますデータバインディング。 this.userもユーザーの入力値で自動的に更新されます。

は、より多くの情報のための角度のドキュメントを参照してください：https://angular.io/guide/forms