Question

我有一个timeline页面，我希望在点击编辑时，它会在this等输入标记中转换标题。但问题是，当我点击某个帖子中的编辑时，它会影响时间轴中的所有帖子。有没有办法不在所有元素中共享相同的变量？

模板

<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来展示它是如何工作的（我从你的例子中移除了大部分内容，因为它不相关），你可以轻松地将它扩展到你的用例。单击帖子的标题可切换到该单个帖子的编辑模式。

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

1 个答案: