Question

Angular2 HTML模板中有一个很长的代码。如何在＆lt;中重构此代码？ tr> 在较短的版本中。或者将其移至@Directive。？

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

来自bootstrap3的

class .active

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

更改：重命名＆lt; TD＆GT;到＆lt; TR＆GT;

Answer 1

您的意思是<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;
}

Answer 2

试试..

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

或者如果不起作用，请使用安全导航操作员将其略微缩短为..

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

如何将Angular2 HTML中的代码部分重构为更短的版本？

2 个答案: