Angular 5 - Открытое редактирование по клику, но только для выбранного пользователя

Question

Я создаю простые операции CRUD в Angular 5, используя firebase, и у меня есть проблемы с реализацией моей идеи.У меня есть список пользователей из БД.Каждый пользователь имеет свой собственный элемент <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;
  }
}

Answer 1

Попробуйте это.

  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>