2017-10-23 2 views
0

Ich habe versucht, eine Optionsschaltfläche auf dem Bildschirm mit einer Eigenschaft in der ts-Datei verbunden, die dann in ein anderes Div/hide-in gezeigt wird, aber es scheint, dass sowohl *ngIf="isFooSelected" und [hidden]="!isFooSelected" nur bei der ersten Belastung funktionieren. Gibt es eine andere Konvention, um dies mit Typoskript zu tun? Muss ich eine Art CSS-Hack machen, um eine Klasse hinzuzufügen und zu entfernen, die die Höhe auf Null setzt?Ein Div verbergen/anzeigen, nachdem das DOM ursprünglich geladen wurde?

Wie angeforderter Code. Tut mir leid, ich nahm an, dass es so einfach war, dass es sich nicht auf meinen spezifischen Versuch bezieht.

.html:

<div class="ui-g-12"><p-radioButton name="group2" value="true" label="Shared" [(ngModel)]="isPouchesShared"></p-radioButton></div> 

    <div class="ui-g-12"><p-radioButton name="group2" value="false" label="Individual" [(ngModel)]="isPouchesShared"></p-radioButton></div> 

<div [hidden]="!isPouchesShared"> 
    isPouchesShared == true 
</div> 

<div *ngIf="isPouchesShared"> 
    isPouchesShared == true 
</div> 

.ts:

export class FooComponent { 
    isPouchesShared: boolean = true; } 
+1

Wir können nicht sagen, warum Ihr Code nicht wie erwartet funktioniert und wie Sie ihn beheben können, wenn Sie Ihren Code nicht anzeigen. –

+0

@JBNizet, Entschuldigung, ich nahm an, dass es sich nicht um ein Fehlerproblem handelte, sondern um die Implementierung mit den falschen Tools. Ich habe ein bisschen von meinem Code hinzugefügt. – azulBonnet

+0

p-radioButton ist nichts Standard, daher ist es schwer zu sagen, was falsch ist, ohne zu raten. Meine Vermutung ist, dass es "[Wert]" anstelle von "Wert" sein sollte, wie in http://plnkr.co/edit/oO2HfkBNCT639bGNDIZt?p=preview, was wie erwartet funktioniert. Ansonsten sind die gebundenen Werte die Strings 'false' und 'true', die beide truthy sind. –

Antwort

0

Angular-Setup in der PrimeNg Dokumentation nicht ganz sinnvoll. Funktioniert mit "[Wert]".

<div class="ui-g-12"><p-radioButton name="group2" value="true" label="Shared" [(ngModel)]="isPouchesShared"></p-radioButton></div> 

<div class="ui-g-12"><p-radioButton name="group2" value="false" label="Individual" [(ngModel)]="isPouchesShared"></p-radioButton></div> 

<div [hidden]="!isPouchesShared"> 
    isPouchesShared == true 
</div> 
Verwandte Themen