Angular2は条件演算子を使用してバインドします

Question

angular2のバインディングについて質問があります。

私は単純なコンポーネントを書いて、これはコードです：

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

私はこのようにそれを使用する：あなたは、私は、たとえば、変数を使用してテキストを結合しています見ることができるように

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

によって選択された会社ラベル。 このようにすべてがうまくいく、とselectedCompanyLabel変更thaラベルも同様に変更します。

私のような何か使用してその変数を避けるだろう：

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

をしかし、コンテンツがバインドされていないこの方法です。したがっての会社が変更された場合、ラベルは更新されません。

しかし、その戦略をスタイルで使用すると効果があります。例えば、素晴らしい作品のようなもの：

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

あなたはその理由を知っていますか？

どうもありがとう

Answer 1

私が代わりに以下を使用します：company.nameため

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

引用符なし。問題が何であるか、あなたの質問から

Answer 2

わからないが、私はこれはあなたが

[text]="company?.name" 

探しているものだと思います