Angular：通过 ngIf 或切换类隐藏/显示元素？答案

【问题标题】：Angular: Hiding/showing elements by ngIf or Toggling a class?Angular：通过 ngIf 或切换类隐藏/显示元素？
【发布时间】：2019-06-12 05:23:54
【问题描述】：

我想知道解决这个问题的最佳方法是什么，我对 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 更改为输入，编辑/删除按钮更改为取消编辑/保存编辑按钮组。（我知道我需要稍微更改一下 html，因为按钮目前不在表单元素中，但我不在连接它的部分）。

我想到了两种方法来做到这一点。 1) 使用 ngIf，这样我就可以保存渲染的元素，并且编辑/取消按钮切换编辑模式；或 2) 使用 ngClass 并切换 display:none css classes 来点击按钮。

现在，当您单击编辑按钮时，无论您单击哪个编辑按钮，它都会将所有列翻转为输入，而不仅仅是用户想要编辑的行。

这是我的组件 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;
  }

}

对实现这一目标的最佳（最有效）方法有何想法？

【问题讨论】：

标签： javascript angular

【解决方案1】：

您已经完成了所有艰苦的工作。

对于单个项目的编辑，剩下的就是：将editTopicMode 更改为editTopicId。

那么你可以：

在启用编辑时将其设置为topic.id，在编辑关闭时设置为null
将您的 *ngIf 更改为 editTopicId === topic.id（或 !== 根据需要）

这应该就是全部了。

如果要启用多重编辑，只需为每个主题添加一个名为isInEditMode 的属性即可。

您的*ngIf 支票变为topic.isInEditMode
根本没有isInEditMode 属性就像false，因为undefined 是一个假值
在启用编辑时将topic.isInEditMode 设置为true，在编辑关闭时设置false

【讨论】：

【解决方案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>

【讨论】：