:first-child with *ngFor 无法正常工作

Question

我正在尝试在导航栏按钮上使用:first-child，但由于某种原因它适用于所有导航按钮。\n同样适用于:last-child.

\n\n

html:

\n\n

<div fxLayout="row" class="top-padding-30">\n  <ul fxFlex="100" *ngFor="let tab of navigation_buttons;">\n    <li class="tab tab-text" [ngClass]="{\'active-tab\': tab.isSelected == true}" (click)="selectTab(tab)" fxLayoutAlign="center center">{{tab.name}}</li>\n  </ul>\n</div>\n

\n\n

CSS：

\n\n

.tab {\n  background-color: #d2d2d2;\n  padding: 18px;\n  cursor: pointer;\n  margin-right: 3px;\n  &.active-tab {\n    background-color: #452f46;\n    color: #ffffff;\n  }\n  &:first-child {\n    border-radius: 0px 15px 15px 0px;\n  }\n  //   &:last-child {\n  //     border-radius: 15px 0px 0px 15px;\n  //   }\n}\n

\n\n

TS：

\n\n

navigation_buttons = [{\n  isSelected: false,\n  name: \'\xd7\x9c\xd7\x91\xd7\xa0\xd7\x94 (6%)\'\n}, {\n  isSelected: false,\n  name: \'\xd7\x92\xd7\x91\xd7\x99\xd7\xa0\xd7\x94 \xd7\x9c\xd7\x91\xd7\xa0\xd7\x94 (12%)\'\n}, {\n  isSelected: false,\n  name: \'\xd7\x92\xd7\x91\xd7\x99\xd7\xa0\xd7\x95\xd7\xaa \xd7\xa6\xd7\x94\xd7\x95\xd7\x91\xd7\x95\xd7\xaa (17%)\'\n}, {\n  isSelected: false,\n  name: \'\xd7\x92\xd7\x91\xd7\x99\xd7\xa0\xd7\x94 \xd7\x91\xd7\x95\xd7\x9c\xd7\x92\xd7\xa8\xd7\x99\xd7\xaa (25%)\'\n}, {\n  isSelected: true,\n  name: \'\xd7\x99\xd7\x95\xd7\x92\xd7\x95\xd7\xa8\xd7\x98\xd7\x99\xd7\x9d (60%)\'\n}]\n

\n

Answer 1

ngFor 有内置的“第一个”和“最后一个”

这是来自文档：

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

文档：https://angular.io/api/common/NgForOf#usage-notes

您可以将first和last与[ngClass]或[ngStyle]结合使用

仅供参考，第一个和最后一个只是布尔值。