2016-04-11 20 views
6

Ich habe eine Frage über die Bindung in angular2.Angular2 Bindung mit Bedingungsoperator

ich eine einfache Komponente geschrieben, das ist der Code:

@Component({ 
    selector: 'drawer-item', 
    templateUrl: '../res/views/drawer-item.html' 
}) 
export class DrawerItemComponent 
{ 
    @Input() text:string; 
    @Input() icon:string; 
    @Input() textClass:string; 
} 

<div class="drawer-item-text word-wrap {{textClass}}"> {{text}}</div> 
<i class="mdi mdi-{{icon}} drawer-item-img"></i> 

ich es wie folgt verwendet werden:

<drawer-item (click)="selectCompany()" [text]="selectedCompanyLabel" [icon]="selectedCompanyIcon" [textClass]="selectedCompanyClass"></drawer-item> 

Wie Sie bin ich verbindlich den Text mit variablen sehen können, zum Beispiel mit selectedCompanyLabel. Auf diese Weise funktioniert alles gut, und wenn selectedCompanyLabel ändern, ändert sich die Beschriftung auch.

würde ich diese Variable mit so etwas wie vermeiden:

[text]="company ? 'company.name' : 'Select a company'" 

Aber ist diese Weise der Inhalt nicht binded wird. Wenn sich Firma ändert, wird das Etikett nicht aktualisiert.

Aber wenn ich diese Strategie in einem Stil verwende, funktioniert es! Zum Beispiel etwas wie funktioniert gut:

<div class="company ? 'italic' : 'bold'"> ... </div> 

Wissen Sie warum?

Vielen Dank

Antwort

11

ich stattdessen folgendes verwenden würde:

[text]="company ? company.name : 'Select a company'" 

Keine Angebote für company.name.

2

Nicht sicher aus Ihrer Frage, was das Problem ist, aber ich denke, das ist das, was Sie suchen

[text]="company?.name" 
Verwandte Themen