如何将Angular2 HTML中的代码段重构为较短的版本？

Angular2 HTML模板中有很长的代码。如何重构此代码< tr>在较短的版本。或将其移动到@Directive。？如何将Angular2 HTML中的代码段重构为较短的版本？

activeContact - 它在@Component类中定义变量，以便从代码中访问选定的行？

类。主动从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>

更改：更名< TD>到< TR>

来源

2017-03-03 Denis Mironov

你的意思是在<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>

定义组件类中这些方法：

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

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

来源

2017-03-03 23:14:25

尝试..

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

，或者说不会工作使用安全导航操作，缩短它稍微..

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

来源

2017-03-04 03:53:35 danday74

如何将Angular2 HTML中的代码段重构为较短的版本？

回答

相关问题