Question

我的编辑功能需要帮助。单击编辑按钮时，我需要将项目加载到表单。这就是我的应用程序的工作方式，首先，有一个用户列表，然后你可以点击＆＃34;查看更多＆＃34;该特定用户的按钮，它会将您重定向到新页面。在该新页面中，您将找到＆＃34;编辑按钮＆＃34;因此，我尝试使用联系号码选择编辑功能，因为我没有索引，因为它是一个对象。只有一个问题，我怎样才能在编辑表格中加载项目？我相信这是一个非常简单的问题，但我对此感到困惑。如果您有更好的解决方案，请帮助我。

用户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

如果您使用@mok提到的ngModel绑定，那么您的编辑代码就像您的详细代码一样：

  user: User;

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

然后，用户属性将使用Angular的双向数据绑定自动显示在表单上。 this.user也会根据用户输入的值自动更新。

有关详细信息，请参阅Angular文档：https://angular.io/guide/forms

加载表格中的项目以便以角度

2 个答案: