Comment refactoriser la section de code dans Angular2 HTML vers une version plus courte?

Question

Il existe un code long dans le modèle HTML Angular2. Comment refactoriser ce code en < tr> dans une version plus courte. Ou déplacez-le sur @Directive.

activeContact - il a défini une variable dans la classe @Component, pour avoir accès à la ligne sélectionnée à partir du code?

classe .active de bootstrap3

<tr 
    *ngFor="let contact of clientsData.contacts" 
    [class.active] = "activeContact && contact.contactId == activeContact.contactId" 
    (click)="activeContact = contact" class ="gm-pointer" 
> 
    <td>{{contact.name}}</td> 
    <td>{{contact.surname}}</td> 
</tr> 

Changé: Renommé < td> à < tr>

Answer 1

vous dire le code dans le <tr>.

<tr 
    *ngFor="let contact of clientsData.contacts" 
    [class.active] = "isActive(contact)" (click)="activate(contact)" class ="gm-pointer" 
    > 
    <td>{{contact.name}}</td> 
    <td>{{contact.surname}}</td> 
    </tr> 

définissent ces méthodes dans votre classe de composant:

isActive(contact): boolean{ 
return this.activeContact && contact.contactId == this.activeContact.contactId; 
} 

activate(contact): void{ 
this.activeContact = contact; 
} 

Answer 2

essayer ..

[class.active] = "activeContact === contact" 

ou si cet opérateur utilisation wont travail de sécurité de la navigation pour le raccourcir légèrement ..

[class.active] = "contact.contactId == activeContact?.contactId"