Angular2 - Materialize - dynamic icons

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"}}