Question

我试图在导航栏按钮上使用:first-child，但是出于某种原因，它可以在所有导航按钮上使用。 :last-child同样适用。

html：

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

scss：

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

ts：

navigation_buttons = [{
  isSelected: false,
  name: 'לבנה (6%)'
}, {
  isSelected: false,
  name: 'גבינה לבנה (12%)'
}, {
  isSelected: false,
  name: 'גבינות צהובות (17%)'
}, {
  isSelected: false,
  name: 'גבינה בולגרית (25%)'
}, {
  isSelected: true,
  name: 'יוגורטים (60%)'
}]

Answer 1

之所以会这样，是因为所有.tab实际上都是他父母的第一个孩子（ul）。

您可能想将*ngFor放在li节点上，以便对菜单项重复该操作。

如果没有，请发布您的输出html，以便我们可以看到此处发生的情况。

Answer 2

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]结合使用

仅供参考，FYI只是布尔值。

：带有* ngFor的第一个孩子无法正常工作

2 个答案: