Angular: скрытие / отображение элементов с помощью ngIf или переключение класса?

Question

Мне интересно, как лучше решить эту проблему, и я очень плохо знаком с TypeScript и Angular. Используя Angular 5.

В любом случае. У меня есть список элементов на странице через таблицу.

Это код, который управляет указанным списком.

<tbody>
      <tr class="text-center" *ngFor="let topic of topics">
        <td *ngIf="!editTopicMode">{{ topic.name }}</td>
        <td id="{{topic.id}}" *ngIf="editTopicMode">
          <form>
            <div class="form-group">
              <input class="form-control" type="text" name="name" value="{{topic.name}}" />
            </div>
          </form>
        </td>
        <td>
          <div *ngIf="!editTopicMode" class="btn-group btn-group-sm">
            <button class="btn btn-link" (click)="editTopicBtnClick(topic.id)">
              <i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
            </button>
            <button class="btn btn-link">
              <i class="fa fa-trash fa-2x" aria-hidden="true"></i>
            </button>
          </div>
          <div *ngIf="editTopicMode" class="btn-group-sm">
            <button class="ml-2 btn btn-sm btn-outline-secondary" (click)="cancelEditMode()">Cancel</button>
            <button class="ml-2 btn btn-sm btn-outline-primary">Save</button>
          </div>
        </td>
      </tr>
    </tbody>

Что я собираюсь сделать, так это то, что если пользователь нажимает на значок карандаша (редактировать), то смежный div изменяется от обычного td на вход, а кнопки редактирования / удаления меняются на cancelEdit / save редактирует группу кнопок. (Я знаю, что мне нужно немного изменить html, потому что кнопки не находятся в элементе формы в настоящее время, но я не нахожусь там в части подключения).

Я думал о двух способах сделать это. 1) с помощью ngIf, чтобы я мог сохранить отображаемые элементы и кнопки редактирования / отмены, переключающие режим редактирования; или 2) использовать ngClass и переключать отображение: нет классов CSS для нажатой кнопки.

Прямо сейчас, когда вы нажимаете кнопку редактирования, независимо от того, какую кнопку редактирования вы нажимаете, она переворачивает все столбцы на входные данные, а не просто на строку, которую пользователь хочет редактировать.

Вот мой компонент ts:

import { Component, OnInit, TemplateRef, ElementRef, ViewChild, Inject } from '@angular/core';
import { Topic } from '../models/topic';
import { TopicService } from '../services/topicService/topics.service';
import { AlertifyService } from '../services/alertify/alertify.service';
import { ActivatedRoute } from '@angular/router';
import { DOCUMENT } from '@angular/common'; 

@Component({
  selector: 'app-topics',
  templateUrl: './topics.component.html',
  styleUrls: ['./topics.component.css']
})

export class TopicComponent implements OnInit {
  @ViewChild('topicId') topicId: ElementRef;

  topics: Topic[];
  newTopic: Topic = {
    id: 0,
    name: '',
  };
  editTopicMode = false;

  constructor(
    @Inject(DOCUMENT) document,
    private topicsService: TopicService,
    private alertify: AlertifyService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    //this.route.data.subscribe(data => {
    //  this.topics = data['topics'];
    //})
    this.getTopics();
  }

  getTopics() {
    this.topicsService.getAllTopics()
      .subscribe(data => {
        this.topics = data;
      }, error => {
        this.alertify.error(error);
      });
  }

  addTopic() {
    this.topicsService.createTopic(this.newTopic)
      .subscribe((topic: Topic) => {
        this.topics.push(topic);
        this.alertify.success(this.newTopic.name + ' added as a new topic.');
        this.newTopic.name = '';
      },
      (err: any) => {
        this.alertify.error(err);
      }
    )
  }

  editTopicBtnClick(event) {
    console.log(event);
    this.editTopicMode = true;
    console.log(document.getElementById(event));
  }

  cancelEditMode() {
    this.editTopicMode = !this.editTopicMode;
  }

}

Есть какие-нибудь мысли о лучшем (наиболее эффективном) способе сделать это?

Answer 1

Вы уже проделали всю тяжелую работу.

Для редактирования одного элемента все, что осталось: изменить editTopicMode на что-то вроде editTopicId.

Тогда вы можете:

• Установите значение topic.id при включенном редактировании и null, например, при закрытом редактировании
• Измените *ngIf на editTopicId === topic.id (или !== при необходимости)

И это все.

---

Если вы хотите включить множественное редактирование, просто добавьте свойство isInEditMode к каждой теме.

• Ваш *ngIf чек становится topic.isInEditMode
• Нет isInEditMode свойство вообще похоже на false, потому что undefined является ложным значением
• Установите topic.isInEditMode на true при включенном редактировании, false при редактировании закрыто

Answer 2

Использование * ngIf нормально, просто убедитесь, что вы установили переменную * ngIf, чтобы она указывала на что-то определенное для конкретной строки * ngFor

этот пример может быть чище, но вы можете сделать это так же просто, как

<button (click)="topic.edit = true" *ngIf="topic.edit === false">edit</button>
<button (click)="topic.edit = false" *ngIf="topic.edit === true">cancel</button>