Angular ngIf 动态生成 属性

Question

我在 Angular 中有应用程序，在 html 中我有 post 的列表。在每个 post 下，我想让文本区域添加新评论。单击按钮后，我想 show/hide 这个文本区域。但我不能做 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 但如何在打字稿文件中添加 postId？:

 public enabledAddComment: boolean;

Answer 1

使用 postCommentModel 本身。添加一个 isSelected 标志来切换 ngIf 条件。

Answer 2

您在函数中传递 post $index 以启用特定的 post 文本区域。

<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;
}
}