Angular2 - 實現 - 動態圖標

Question

在angular2中，我使用Materialize.css，並且我希望圖標在我的模型中依賴於一個值。

<ul> 
    <li *ngFor="let tab of tabs" 
    [class.active]="(tab.id == active)" 
    (click)="go(tab.id)"> 
    <a href="#"> 
     <i class="material-icons left">{{complete(tab.id)}}</i> 
     {{tab.name}} 
    </a> 
    </li> 
</ul> 

與

public tabs = [ 
    {id: "great", name: "I'm great"}, 
    {id: "personal", name: "Persoonlijk"}, 
    {id: "identity", name: "Identiteit"}, 
    {id: "prefs", name: "Voorkeuren"}, 
    {id: "available", name: "Beschikbaar"}]; 

「活動」類和「走出去」的方法，做工精細，在（荷蘭）標籤出現正確的，但是在我的方法「完成」我得到「未定義」作爲「tabid」的值。

complete(tabid) { 
    console.log(tabid); 
    return (this.candidate && this.candidate.complete[tabid]) ? "done" : "crop_square" 
} 

任何指針都會受到歡迎。

Answer 1

而不是

{{complete(tab.id)}} 

試試這個：

{{(candidate && candidate.complete[tab.id]) ? "done" : "crop_square"}}