我正在尝试在导航栏按钮上使用 :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;
// }
}
:
navigation_buttons = [{
isSelected: false,
name: 'לבנה (6%)'
}, {
isSelected: false,
name: 'גבינה לבנה (12%)'
}, {
isSelected: false,
name: 'גבינות צהובות (17%)'
}, {
isSelected: false,
name: 'גבינה בולגרית (25%)'
}, {
isSelected: true,
name: 'יוגורטים (60%)'
}]
最佳答案
ngFor 有内置的“first”和“last”
这是来自文档:
<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] 结合使用
仅供引用,first 和 last 只是 bool 值。
关于css - :first-child with *ngFor is not working properly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51693525/