ngIf

Question

için Angular 2 şablon değişkenine erişme Bir öğede bir şablon değişkeni tanımlamaya çalışıyorum ve öğenin DOM'da gerçekten bulunup bulunmadığını ve sonra buna dayalı olarak başka bir öğe gösterip göstermediğini belirlemek için gizli özniteliğini kullanıyorum. Ancak yapısal bir yönerge varsa, şablon değişkeni bir değer döndürmüyor gibi görünmektedir. Hem içeren unsurları şablon değişkenleri ngIf ve wpHasAnyPermission bir değerler döndürmediğinden niteliklerini Görüldüğü gibi

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

Çıktı

rbtn: 
ebtn: false 
dline: 

olduğunu. Yapmak sonunda istiyorum ne

bölücüyü görüntülendiği karar vermek hr arasında ngIf içinde resendEmailBtn ve editAccountBtn kullanmaktır.

Bunu çözmenin en iyi yolu nedir? Bileşen koduyla uğraşmaktan kaçınmak istiyorum. Bunu HTML'de çözmeyi deneyin.

Answer 1

Değişken, *ngIf'un uygulandığı öğe dışında kullanılamaz.

<hr class="divider" *ngIf="false" #divi> 

sadece <template> öğesi içinde satışa sunulacak

<template let-divi [ngIf]="false"> 
    <hr class="divider" > 
</template> 

ve divi tarafından yerini alacak.

Sen bütün bileşenleri şablonu içinde kullanılabilir hale getirmek için, sizin bileşenleri sınıfına

@ViewChild('editAccountBtn') editAccountBtn:ElementRef; 

ekleyebilir. Sorgulanan öğe DOM'ye eklendiğinde yalnızca bir değeri vardır. false için değerlendiren bir *ngIf içinde ise, değer null olacaktır.