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

Question

我试图让最终用户能够编辑他们创建的 post。我正在使用 Angular ngFor 向他们显示 post 的数组。 post 的内容有一个 ngIf，如果用户想要编辑 post，它会被切换。

<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 是真的。

我的问题是如何编辑特定的 post 而不是同时使每个 post 可编辑。

提前致谢:)

Answer 1

在这种情况下，您需要在每个 post 对象上添加一个名为 showEdit 的属性，然后您就可以

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

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

How to display an element specific to an object in an array with ngIf

angular-ng-if

ngfor

angular