如何限制 Angular 5 上的元素范围？

Question

我有一个timeline page and i want to when the edit is clicked, it transforms the title in a input tag like this。但问题是，当我在某些 post 中单击编辑时，它会影响时间轴中的所有 post。有没有办法在所有元素中不共享相同的变量？

模板

<div class="card border-dark mb-3 mx-auto" style="max-width: 25rem;" *ngFor="let post of postList">

<div class="card-body text-dark">

        <i class="fas fa-trash  float-right" style="color:rgb(163, 163, 163)" (click)="deletePost(post)" ></i>
        <i class="fas fa-edit" style="margin-bottom: 10px;"  (click)='editarPost(post)'></i>

    <h5 class="card-title"  *ngIf='editarPostBool==false' >{{post.titulo | uppercase }}</h5>
    <input type="text" *ngIf='editarPostBool' [(ngModel)]="post.titulo" class="input-titulo" >

    <p class="card-text">{{post.texto}}</p>

    <p class="card-text">
        <small class="text-muted">postado por {{post.nomePessoa}}</small> 
    </p>

    <div class="tristezas">
        <span>{{post.tristezas}}</span>
        <i class="fas fa-frown fa-2x tristeza-icon" (click)="maisTristeza(post)" [class.tristeza-ativa]="post.tristezaDada"></i>
    </div>
</div>

还有.ts

export class PostsItselfComponent implements OnInit {
@Output() tristezaClicada = new EventEmitter();
postList: Posts[]
editarPostBool:boolean = false

constructor(private postService: PostService) { }

ngOnInit() {
this.getPost()
}

maisTristeza(post: Posts) {
if (post.tristezaDada == true) {
  return
} else {

  console.log(post)
  this.postService.addTristeza(post)
    .subscribe((data) => { console.log(data) })
}
}

getPost() {
console.log("geeet")
this.postList = [];
this.postService.getPosts()
  .subscribe((data) => { this.postList = data }, (error) => console.log(error));
}

deletePost(post: Posts) {
this.postService.excluirPost(post)
  .subscribe((data) => { console.log(data); this.getPost() })
}

editarPost(post){
this.editarPostBool = true
console.log(this)
console.log('editar')
}
}

Answer 1

您可以单独跟踪每个 edit，并且仅在单击图标时修改相关的。

我做了一个快速的 stackblitz example 来展示它是如何工作的（我从你的例子中删除了大部分内容，因为它不相关），你可以轻松地将它扩展到你的用例.单击 post 的标题可切换到该单曲 post 的编辑模式。

如何限制 Angular 5 上的元素范围？

How do i restrict the element scopes on Angular 5?

angular-components

angular

angular5