如何使用ngIf显示特定于数组中对象的元素

时间:2018-06-12 01:48:25

标签: angular ngfor ngif

我试图让最终用户能够编辑他们创建的帖子。我正在使用Angular ngFor向他们展示一系列帖子。如果用户想要修改帖子,帖子的内容会有ngIf切换。

<div class="card-body">
  <p class="card-text" *ngIf="!showEditPost">{{ post.content }}</p>
  <div *ngIf="showEditPost">
    <div class="row" >
      <div class="col-md-12">
        <textarea name="text-post" [(ngModel)]="post.content" class="form-control" rows="3"></textarea>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-md-12">
        <button class="btn btn-light">Cancel</button>
        <button class="btn btn-primary" (click)="updatePost()">Save</button>
      </div>
    </div>
  </div>
</div>

我遇到的问题是showEditPost变量在ngFor数组的每次迭代中都是相同的,这意味着当showEditPost为真时,每个帖子都可以编辑。

我的问题是如何在不同时编辑每个帖子的情况下编辑特定帖子。

提前致谢:)

1 个答案:

答案 0 :(得分:2)

在这种情况下,您需要在每个帖子对象上添加名为 showEdit 的属性,然后您就可以了

<p class="card-text" *ngIf="!post.showEdit">{{ post.content }}</p>