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更改为输入，而“编辑/删除”按钮则更改为“取消”。编辑按钮组。（我知道我需要稍稍更改html，因为按钮当前不在表单元素中，但是在将其连接起来的位置上我不在那儿。）

我想到了两种方法来做到这一点。 1）使用ngIf，这样我就可以保存渲染的元素，并且edit / cancel按钮可以切换editMode；或2）使用ngClass并切换display：没有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

使用* ngIf很好，只需确保将* ngIf变量设置为指向某个特定于* ngFor特定行的东西

此示例可能更简洁，但您可以轻松完成

print

Answer 2

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

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

然后您可以：

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

那应该是全部。

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

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

角度：通过ngIf或切换类隐藏/显示元素？

2 个答案: