Angular ngIf 具有動態生成的屬性

Question

我在 Angular 和 html 中有應用程序，我有帖子列表。 在每篇文章下，我都希望有 textarea 來添加新評論。 我想在單擊按鈕后顯示/隱藏此文本區域。 但我不能做 ngIf="someproperty" 因為點擊按鈕后所有的文本區域都會顯示出來。

<a href="" (click)="enabledAddComment = true"></a>

<div>
  <div *ngIf="enabledAddComment" class="p-2 form-group">
    <textarea type="text" class="form-control" id="inputCommentBody" placeholder="Text" [(ngModel)]="postCommentModel.body" rows="3"></textarea>
  </div>
  <button>
    Add comment
  </button>
</div>

我想添加到屬性enabledAddComment postId 但如何在 typescript 文件中添加 postId？：

 public enabledAddComment: boolean;

Answer 1

使用 postCommentModel 本身。 添加一個 isSelected 標志來切換 ngIf 條件。

Answer 2

您在 function 中傳遞 post $index 以啟用特定的帖子文本區域。

<a href="" (click)="enabledAddComment($index)"></a>

<div>
              <div *ngIf="postCommentModel.enableAddCommentText" class="p-2 form-group">
                <textarea type="text" class="form-control" id="inputCommentBody" placeholder="Text" [(ngModel)]="postCommentModel.body" rows="3"></textarea>
              </div>
              <button>
                Add comment
              </button>
            </div>

function enableAddComment(index){
if (this.post[index].enableAddCommentText == false)
 {
  this.post[index].enableAddCommentText = true;
 }
else{
this.post[index].enableAddCommentText = false;
}
}