[英]Angular ngIf with dynamic generated property
I have app in Angular and in html I have list of posts.我在 Angular 和 html 中有应用程序,我有帖子列表。 Under every post I want to have textarea to add new comment.
在每篇文章下,我都希望有 textarea 来添加新评论。 I want to show/hide this textarea after click button.
我想在单击按钮后显示/隐藏此文本区域。 But I can't do ngIf="someproperty" because after click button all textareas will be shown.
但我不能做 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>
I want to add to property enabledAddComment
postId but how to add postId in typescript file?:我想添加到属性
enabledAddComment
postId 但如何在 typescript 文件中添加 postId?:
public enabledAddComment: boolean;
Use the postCommentModel itself.使用 postCommentModel 本身。 Add a isSelected flag to toggle ngIf condition.
添加一个 isSelected 标志来切换 ngIf 条件。
You pass post $index in function to enable particular post text area.您在 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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.