typescript - Angular2 使用条件运算符绑定(bind)

Question

我对 angular2 中的绑定(bind)有疑问。

我写了一个简单的组件，这是代码:

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

如您所见，我将文本与变量绑定(bind)在一起，例如 selectedCompanyLabel。 通过这种方式，一切都很好，如果 selectedCompanyLabel 发生变化，标签也会发生变化。

我会避免使用类似这样的变量:

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

但是这样内容是没有绑定(bind)的。因此，如果公司发生变化，则标签不会更新。

但如果我以某种方式使用该策略，它就会奏效!例如，类似的东西效果很好:

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

你知道为什么吗？

非常感谢

Answer 1

我会改用以下内容:

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

company.name 没有引号。