Angular 5 - 单击时打开编辑,但仅限选定用户

时间:2018-05-10 09:56:26

标签: html5 angular typescript

我使用firebase在Angular 5中创建了一个简单的CRUD操作,我对实现我的想法有疑问。我有来自db的用户列表。每个用户都有自己的<tr>元素和9 <td>。要在<td>中添加按钮,向我显示所选用户下的编辑表单。我确实形成了一切都很好但我有一个问题:

我需要在用户点击编辑按钮后打开一次编辑表单。当我现在点击编辑按钮时,它会打开每个用户下的编辑表单。

... code here ...
<tbody>
    <tr *ngFor="let user of userList; let i = index">
      <td>{{i + 1}}</td>
      <td>
        {{user.nickName}}
      </td>
      <td>{{user.password}}</td>
      <td>{{user.name}}</td>
      <td>{{user.surname}}</td>
      <td>{{user.dateOfBirth.year}}-{{user.dateOfBirth.month}}-{{user.dateOfBirth.day}} </td>
      <td>{{user.group}}</td>
      <td>
        <a (click)="openEdit(user)">
          <button class="btn btn-primary">
            <i class="fas fa-edit"></i>
          </button>
        </a>
      </td>

      <td>
        <button class="btn btn-danger">
          <i class="fas fa-trash-alt"></i>
        </button>
      </td>

      <td *ngIf="editForm">

        <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
          <div class="form-group">
            <label>Nazwa</label>
            <input class="form-control" name="nickName" #name="ngModel" [(ngModel)]="userService.selectedUser.nickName">
          </div>
          <div class="form-group">
            <label>Hasło</label>
            <input class="form-control" name="password" #name="ngModel" [(ngModel)]="userService.selectedUser.password">
          </div>
          <div class="form-group">
            <label>Imię</label>
            <input class="form-control" name="name" #name="ngModel" [(ngModel)]="userService.selectedUser.name">
          </div>
          <div class="form-group">
            <label>Nazwisko</label>
            <input class="form-control" name="surname" #name="ngModel" [(ngModel)]="userService.selectedUser.surname">
          </div>
          <div class="form-group">
            <label>Data urodzenia</label>
            <input class="form-control" name="dateOfBirth" #name="ngModel" [(ngModel)]="userService.selectedUser.dateOfBirth">
          </div>
          <div class="form-group">
            <label>Grupa</label>
            <select>
              <option>Jeden</option>
            </select>
            <input class="form-control" name="group" #name="ngModel" [(ngModel)]="userService.selectedUser.group">
          </div>
          <div class="form-group">
            <button class="btn btn-default" type="submit">Zapisz</button>
            <button class="btn btn-default" type="button" (click)="resetForm(userForm)">Reset</button>
          </div>
        </form>
      </td>

    </tr>

  </tbody>

... code here ...

component.ts

export class UsersComponent implements OnInit {
  userList: User[];
  editForm: boolean;

  constructor(private userService: UserService) {}

  ngOnInit() {
    var x = this.userService.getData();
    x.snapshotChanges().subscribe(item => {
      this.userList = [];
      item.forEach(element => {
        var y = element.payload.toJSON();
        y['$key'] = element.key;
        this.userList.push(y as User);
      })
    })
  }

  openEdit(user: User) {
    this.editForm = !this.editForm;
  }
}

1 个答案:

答案 0 :(得分:0)

试试这个。

  export class UsersComponent implements OnInit {
  userList: User[];
  editForm: boolean;
  clickedIndex: number;

  constructor(private userService: UserService) {}

  ngOnInit() {
    var x = this.userService.getData();
    x.snapshotChanges().subscribe(item => {
      this.userList = [];
      item.forEach(element => {
        var y = element.payload.toJSON();
        y['$key'] = element.key;
        this.userList.push(y as User);
      })
    })
  }

  openEdit(user: User, pIndex: number) {
    this.editForm = !this.editForm;
    this.clickedIndex = pIndex
  }
}

模板

<tbody>
<tr *ngFor="let user of userList; let i = index">
  <td>{{i + 1}}</td>
  <td>
    {{user.nickName}}
  </td>
  <td>{{user.password}}</td>
  <td>{{user.name}}</td>
  <td>{{user.surname}}</td>
  <td>{{user.dateOfBirth.year}}-{{user.dateOfBirth.month}}-{{user.dateOfBirth.day}} </td>
  <td>{{user.group}}</td>
  <td>
    <a (click)="openEdit(user, i)">
      <button class="btn btn-primary">
        <i class="fas fa-edit"></i>
      </button>
    </a>
  </td>

  <td>
    <button class="btn btn-danger">
      <i class="fas fa-trash-alt"></i>
    </button>
  </td>

  <td *ngIf="editForm && clickedIndex === i">

    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
      <div class="form-group">
        <label>Nazwa</label>
        <input class="form-control" name="nickName" #name="ngModel" [(ngModel)]="userService.selectedUser.nickName">
      </div>
      <div class="form-group">
        <label>Hasło</label>
        <input class="form-control" name="password" #name="ngModel" [(ngModel)]="userService.selectedUser.password">
      </div>
      <div class="form-group">
        <label>Imię</label>
        <input class="form-control" name="name" #name="ngModel" [(ngModel)]="userService.selectedUser.name">
      </div>
      <div class="form-group">
        <label>Nazwisko</label>
        <input class="form-control" name="surname" #name="ngModel" [(ngModel)]="userService.selectedUser.surname">
      </div>
      <div class="form-group">
        <label>Data urodzenia</label>
        <input class="form-control" name="dateOfBirth" #name="ngModel" [(ngModel)]="userService.selectedUser.dateOfBirth">
      </div>
      <div class="form-group">
        <label>Grupa</label>
        <select>
          <option>Jeden</option>
        </select>
        <input class="form-control" name="group" #name="ngModel" [(ngModel)]="userService.selectedUser.group">
      </div>
      <div class="form-group">
        <button class="btn btn-default" type="submit">Zapisz</button>
        <button class="btn btn-default" type="button" (click)="resetForm(userForm)">Reset</button>
      </div>
    </form>
  </td>

</tr>