Angular 5如何限制元素作用域？解决timeline编辑批量触发问题

看起来你踩了Angular新手常遇到的坑——用了全局变量来控制所有帖子的编辑状态，所以一点击编辑，所有帖子都跟着变了。别担心，我们只需要给每一条帖子单独维护自己的编辑状态，就能轻松解决这个问题。

下面给你两种可行的方案，你可以根据自己的需求选择：

方案一：给每个帖子对象添加编辑状态属性 #

这种方式最简单直接，就是在你的帖子数据里加一个isEditing字段，用来标记当前帖子是否处于编辑状态。

第一步：修改组件的TypeScript代码 #

在获取到帖子列表后，给每个帖子初始化isEditing为false，再写一个切换状态的方法：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-timeline',
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css']
})
export class TimelineComponent implements OnInit {
  postList: any[] = [];

  ngOnInit() {
    // 替换成你实际获取帖子列表的逻辑
    this.postList = [
      { id: 1, title: '我的第一篇帖子', content: '这是帖子内容...' },
      { id: 2, title: 'Angular学习笔记', content: 'Angular 5真好用...' }
    ];

    // 给每个帖子添加编辑状态，初始为未编辑
    this.postList.forEach(post => {
      post.isEditing = false;
    });
  }

  // 切换单个帖子的编辑状态
  toggleEdit(post: any) {
    post.isEditing = !post.isEditing;
  }
}

第二步：修改模板HTML代码 #

在*ngFor循环里，根据当前帖子的isEditing值来切换显示标题还是输入框，点击事件传递当前帖子对象：

<div class="card border-dark mb-3 mx-auto" style="max-width: 25rem;" *ngFor="let post of postList">
  <div class="card-body text-dark">
    <!-- 未编辑状态：显示标题和编辑按钮 -->
    <div *ngIf="!post.isEditing">
      <h5 class="card-title">{{ post.title }}</h5>
      <button class="btn btn-sm btn-primary" (click)="toggleEdit(post)">编辑</button>
    </div>
    <!-- 编辑状态：显示输入框和保存按钮 -->
    <div *ngIf="post.isEditing">
      <input type="text" [(ngModel)]="post.title" class="form-control form-control-sm">
      <button class="btn btn-sm btn-success mt-2" (click)="toggleEdit(post)">保存</button>
    </div>

    <p class="card-text mt-3">{{ post.content }}</p>
    <i class="fas fa-trash float-right" style="color:rgb(163, 163, 163); cursor: pointer;" (click)="deletePost(post.id)"></i>
  </div>
</div>

方案二：用独立对象存储编辑状态（不修改原帖子数据） #

如果你不想修改原有的帖子数据结构（比如担心后端返回的数据被污染），可以用一个单独的对象来记录每个帖子的编辑状态，用帖子的id作为键：

第一步：修改组件的TypeScript代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-timeline',
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css']
})
export class TimelineComponent implements OnInit {
  postList: any[] = [];
  // 用对象存储每个帖子的编辑状态，键是帖子id，值是布尔值
  editStates: { [key: number]: boolean } = {};

  ngOnInit() {
    // 实际获取帖子列表的逻辑
    this.postList = [
      { id: 1, title: '我的第一篇帖子', content: '这是帖子内容...' },
      { id: 2, title: 'Angular学习笔记', content: 'Angular 5真好用...' }
    ];

    // 初始化每个帖子的编辑状态为false
    this.postList.forEach(post => {
      this.editStates[post.id] = false;
    });
  }

  // 根据帖子id切换编辑状态
  toggleEdit(postId: number) {
    this.editStates[postId] = !this.editStates[postId];
  }
}

第二步：修改模板HTML代码 #

<div class="card border-dark mb-3 mx-auto" style="max-width: 25rem;" *ngFor="let post of postList">
  <div class="card-body text-dark">
    <!-- 未编辑状态 -->
    <div *ngIf="!editStates[post.id]">
      <h5 class="card-title">{{ post.title }}</h5>
      <button class="btn btn-sm btn-primary" (click)="toggleEdit(post.id)">编辑</button>
    </div>
    <!-- 编辑状态 -->
    <div *ngIf="editStates[post.id]">
      <input type="text" [(ngModel)]="post.title" class="form-control form-control-sm">
      <button class="btn btn-sm btn-success mt-2" (click)="toggleEdit(post.id)">保存</button>
    </div>

    <p class="card-text mt-3">{{ post.content }}</p>
    <i class="fas fa-trash float-right" style="color:rgb(163, 163, 163); cursor: pointer;" (click)="deletePost(post.id)"></i>
  </div>
</div>

这两种方案的核心都是让每个帖子拥有独立的状态变量，而不是共享同一个全局变量，这样就能实现元素作用域的隔离，点击某条帖子的编辑按钮只会影响这条帖子啦。

内容的提问来源于stack exchange，提问作者Jefferson Costa