角度:通过ngif隐藏/显示元素还是切换类?

我想知道解决这个问题的最佳方法是什么,我对字体和角度非常陌生。使用角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更改为输入,而编辑/删除按钮将更改为取消编辑/保存编辑按钮组。(我知道我需要稍微更改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;
  }

}

有没有想过最好(最有效)的方法来实现这一点?