2016-04-11 30 views
6

Tôi có câu hỏi về sự ràng buộc trong angular2.Angular2 liên kết sử dụng toán tử điều kiện

Tôi đã viết một thành phần đơn giản, đây là đoạn 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> 

tôi sử dụng nó như thế này:

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

Như bạn có thể thấy tôi đang liên kết văn bản với nhau, ví dụ với được chọnCompanyLabel. Bằng cách này, mọi thứ hoạt động tốt và nếu được chọnCompanyLabel cũng thay đổi thay đổi nhãn tha.

tôi sẽ tránh biến rằng việc sử dụng một cái gì đó như:

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

Nhưng cách này nội dung không binded. Vì vậy, nếu công ty thay đổi, nhãn không được cập nhật.

Nhưng nếu tôi sử dụng chiến lược đó theo kiểu, nó hoạt động! Ví dụ: một số nội dung như công trình tuyệt vời:

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

Bạn có biết tại sao không?

Thanks a lot

Trả lời

11

tôi sẽ sử dụng sau đây thay vì:

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

Không có dấu ngoặc kép cho company.name.

2

Không chắc từ câu hỏi của bạn vấn đề là gì nhưng tôi đoán đây là những gì bạn đang tìm kiếm

[text]="company?.name" 
Các vấn đề liên quan