[英]Access template variable in *ngIf
我试图在元素上定义模板变量并使用其隐藏属性来识别元素是否实际存在于DOM中,然后基于该元素显示另一个元素。 但是如果有结构指令,模板变量似乎不会返回值。
<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
<a *wpHasAnyPermission="[{'something': true}]"
#resendEmailBtn>
Resend Welcome Email
</a>
</div>
<div class="pull-right">
<a #editAccountBtn>Edit Account Details</a>
</div>
rbtn: {{resendEmailBtn?.hidden}}
ebtn: {{editAccountBtn?.hidden}}
dline: {{divi?.hidden}}
输出是
rbtn:
ebtn: false
dline:
正如您所看到的,包含属性ngIf
和wpHasAnyPermission
元素上的模板变量都没有返回值。
我最终想要做的是在ngIf
of hr
使用resendEmailBtn
和editAccountBtn
来决定显示分隔符。
解决这个问题的最佳方法是什么? 我想避免处理组件代码。 尝试用HTML解决这个问题。
在应用*ngIf
的元素之外,该变量不可用。
<hr class="divider" *ngIf="false" #divi>
将被取代
<template let-divi [ngIf]="false">
<hr class="divider" >
</template>
和divi
只能在<template>
元素中使用。
你可以加
@ViewChild('editAccountBtn') editAccountBtn:ElementRef;
到您的组件类,使其在整个组件模板中可用。 当查询的元素添加到DOM时,它只有一个值。 如果它在评估为false
的*ngIf
,则该值将为null
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.