我的组件html中有一个div，我想在页面加载时隐藏它，并希望在链接点击时显示。我在* ngFor循环中有多个div，并且我已经为每个div分配了* ngIf = showReply [commentData.id]，以便在组件加载时保持隐藏状态。
稍后当我点击一个链接时，我会调用一个函数，我将id设置为true。
下面的是HTML代码段：
<!-- Reply Link -->
这是我想要显示div的点击链接
<div class="addReplyContainer" >
<a class="addReplyLink" (click)="showReplyTextArea($event, 'showreply'+commentData.id)">Reply</a>
</div>
<!-- Add Reply -->
<div [attr.commentId] = "commentData.target_id" *ngIf = "'showReply'[commentData.id]"
class="addReplyContainer replyTextAreaContainer" >
<textarea (keyup)="keyUpCommentTextarea(reply, commentData.id)" [(ngModel)]="reply" style="width:100%"
class="replyText commentText addReplyTextarea form-control"></textarea>
<button [attr.commentId]="commentData.id" disabled class="btn btn-success addCommentBtn" (click)="addReply(commentData.target_id)">Add</button>
</div>
以下是组件
列表comments.component.ts
import {Component, OnInit, ElementRef, ViewChild, Renderer2} from '@angular/core';
import { CommentsDataService} from "../../services/comments/comments-data.service";
import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';
import {IComment} from "../../comments";
import {ICommentType} from "../../commentType";
declare let jQuery: any;
@Component({
selector: 'app-list-comments',
templateUrl: './list-comments.component.html',
styleUrls: ['./list-comments.component.css'],
providers:[CommentsDataService]
})
export class ListCommentsComponent implements OnInit {
constructor(private commentsDataService:CommentsDataService, private el: ElementRef) {
}
commentsData :any; // Comment Data received from service.
comment:string; // Comment text; declaration.
reply:string;
commentObj:any;
commentArrayObj:any;
public showreply_commentData;
getComments; // Declaration of function.
saveComment;
getUser;
/**
* This Function is triggered to
* call save function and append
* new comment.
* Append new comment
*
*/
addComment()
{
this.comment = this.comment.trim();
let commentObj;
let comment = this.comment;
commentObj ={
"root_id":"1",
"target_id": "1",
"object": this.comment,
"time_stamp":'2 secs ago',
"profile_image":"/../../assets/images/no-user.png",
"first_name" : "john",
};
//let commentObj = this.commentObj; //Put this.commentObj to push it into this.commentData
if( typeof this.comment == "undefined" || this.comment === '' || this.comment == null || this.comment == '\n' || this.comment.length>500 )
{
return false;
}
else
{
this.commentsData.push( commentObj );
this.comment = ''; // Empty comment Textarea.
return comment;
}
}
/**
*
* Function triggered when
* reply link is clicked
* @param event
* @param targetId
*/
showReplyTextArea(event, ngIf);
showReplyTextArea(event, ngIf)
{
ngIf = true
console.log(ngIf)
}
如果showreply [commentData.id] == false / showreply [commentData.id] == true是为这样的ngFor切换ngIf的正确方法吗？
请协助。
谢谢！
* UPDATE
我使用了 Tony Roczz
建议的解决方案我使用了ngFor的索引将ngIf表达式设置为true或false。
HTML：
<!-- Reply Link -->
<div class="addReplyContainer" >
<a class="addReplyLink" (click)="showReplyTextArea($event,i )">Reply</a>
</div>
<!-- Add Reply -->
<div [attr.commentId] = "commentData.target_id" *ngIf = "selectedIndex == i "
class="addReplyContainer replyTextAreaContainer" >
<textarea (keyup)="keyUpCommentTextarea(reply, commentData.id)" [(ngModel)]="reply" style="width:100%"
class="replyText commentText addReplyTextarea form-control"></textarea>
<button [attr.commentId]="commentData.id" disabled class="btn btn-success addCommentBtn" (click)="addReply(commentData.target_id)">Add</button>
</div>
<!-- -----Add Reply end------ -->
组件
showReplyTextArea(event, index)
{
this.selectedIndex = index; // Whenever user click on reply link the
// respective index is set equal to
// selectedIndex variable
console.log( this.selectedindex);
}
感谢@Tony Roczz和@kaddath寻求帮助。