将表单中的项加载到角度编辑

Question

我需要编辑功能帮助。当我点击编辑按钮时，我需要将这些项目加载到表单中。这就是我的应用程序的工作方式，首先，有一个用户列表，然后您可以单击该特定用户的“查看更多”按钮，它会将您重定向到一个新页面。在新的页面中，你会发现“编辑按钮”所以我试图通过选择它与联系人编号做我的编辑功能，因为我没有索引，因为它是一个对象。只有一个问题，那就是我如何加载编辑表格中的项目？我相信这是一个非常简单的问题，但我对此感到困惑。如果您有更好的解决方案，请帮助我。

用户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的数据的任何改变的时候了。在你的情况，例如，你可以做这样的：

首先，进口FormsModule到您的模块：

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"> 

假设你有组件中的变量f_name将加载f_name的初始值并将包含其更新的值。

请注意确切的[（）]符号，它使双向绑定。

有关更多详细信息，请参阅this KB。

Answer 2

如果使用ngModel结合，通过@mok提到的，那么你的编辑代码可以像你的详细信息代码：

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