Question

我有一张CRUD操作的学生表。对于每一行，我都有一个编辑按钮

<table class="table table-bordered table-striped">
    <thead class="studentHeader">
    <tr>
      <td>Roll Number</td>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Gender</td>
      <td></td>
      <td></td>
    </tr>
    </thead>
    <tbody>

    <tr *ngFor="let student of studentList;let i=index">
      <td>{{student.rollNumber}}</td>
      <td>{{student.firstName}}</td>
      <td>{{student.lastName}}</td>
      <td>{{student.gender}}</td>
      <td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" (click)="editStudent(student)">Edit</button></td>
      <td><button type="button" class="btn btn-danger">Delete</button></td>
    </tr>

    </tbody>
  </table>

和模态

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
        <form #studentForm="ngForm" novalidate>
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Add Student</h4>
            </div>
            <div class="modal-body">
              <label path="rollnumber"  class="sr-only">Roll Number</label>
              <input type="text" id="rollNum" class="form-control" [(ngModel)]="studentObj.rollNumber" name="rollnumber" placeholder="Student Roll Number" required autofocus /><br>
              <label path="firstName"  class="sr-only">First Name</label>
              <input type="text" id="firstname" class="form-control" [(ngModel)]="studentObj.firstName" name="firstname" placeholder="Student First Name" required /><br>
              <label path="lastName"  class="sr-only">Last Name</label>
              <input type="text" id="lastname" class="form-control" [(ngModel)]="studentObj.lastName" name="lastname" placeholder="Student Last Name" required />
              <h5><span class="label label-default">Gender</span>&nbsp;&nbsp;
                <input type="radio" name="gender" id="male" value="Male" [(ngModel)]="studentObj.gender">
                <label for="male">Male</label>&nbsp;&nbsp;
                <input type="radio" name="gender" id="female" value="Female" [(ngModel)]="studentObj.gender">
                <label for="female">Female</label><br>
              </h5>
 </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" (click)="addStudent(studentObj)" *ngIf="studentAdd">Add</button>
          <button type="button" class="btn btn-default" data-dismiss="modal" *ngIf="studentUpdate" (click)="updateStudent(studentObj)">Update</button>
</form>
    </div>
  </div>

组件

@ViewChild('studentForm') studentForm: NgForm;
  private studentList: Array<StudentDto> = [];
  private studentObj: StudentDto = {};
  private departmentList: Array<string> = ["Computer Science", "Information Science", "Electronics", "Mechanical", "Civil"];
  private studentAdd: boolean = true;
  private studentUpdate: boolean = false;

  constructor() { }

  ngOnInit() {
    this.studentList = StudentData;
  }

  private addStudent(addStudentObj: StudentDto): void {
    this.studentList.push(addStudentObj);
    this.studentForm.reset();
  }

  private editStudent(editStudentObj: StudentDto): void {
    this.studentAdd = false;
    this.studentUpdate = true;
    this.studentObj = Object.assign({}, editStudentObj);
  }

  private updateStudent(updateStudentObj: StudentDto): void {
    for(let i:number = 0; i<this.studentList.length; i++){
      if(this.studentList[i].rollNumber == updateStudentObj.rollNumber){
        this.studentList[i] = updateStudentObj;
      }
    }
    this.studentForm.reset();

  }

添加/更新学生后，我想将模态重置为空。但是如果是studentForm.reset（），我编辑的特定行会从表中删除。如何重置模态而不删除表中的行？

Answer 1

我在使用表单和表格时遇到了同样的问题，原因是您使用的是两种绑定方式。对我来说，解决方案是使用单向绑定。您需要为此[(ngModel)]更改此[ngModel]。删除括号。

<input type="text" id="lastname" class="form-control" [ngModel]="studentObj.lastName" name="lastname" placeholder="Student Last Name" required />

Angular2：表单重置后删除行

1 个答案: