html - Angular / CSS删除由ngFor呈现的动态数据的顶部边框-仅删除第一行的顶部边框

Question

我有一个这样的html

 <div class="scx-individual-supplier" *ngFor="let request of suppliers" >
      <div>
      <scx-indv-supplier
          class="row"
          *ngIf="!(request.status === 'CANCELLED' && request.durationDays > 179)"
          [request]="request"
          [requestId]="request.requestId"
        ></scx-indv-supplier>
      </div>
    </div>

将 CSS 应用于 scx-individual-supplier 并使用了第一个孩子，但它不会删除第一行的顶部边框

.scx-individual-supplier{
  border-top: 1px solid #d0c9c9;
}

.scx-individual-supplier:first-child {
  border-top: none !important;
}
 

标签： htmlcssangular

Answer 1

使用 ngFor 的索引： *ngFor="let item of items; let i = index" 然后在你的元素中使用
[ngClass]={i === 0 ? 'styleWithoutTopBorder' : 'styleWithTopBorder'}

这 ？是一个三元表达式，它将根据 i === 0 的结果选择 css 类。

更新：带代码

CSS：

.noTopBorder {
  border: '1px solid black';
  border-top: none;
}

.withTopBorder {
    border: '1px solid black';
}

html:

 <div class="scx-individual-supplier" *ngFor="let request of suppliers; let i = index" [ngClass]="{i === 0 ? 'noTopBorder' : 'withTopBorder'}" >
      <div>
      <scx-indv-supplier
          class="row"
          *ngIf="!(request.status === 'CANCELLED' && request.durationDays > 179)"
          [request]="request"
          [requestId]="request.requestId"
        ></scx-indv-supplier>
      </div>
    </div>
<div>