Angular / CSS Удаляет верхнюю границу динамических данных, отображаемых ngFor - Удаляет верхнюю границу ТОЛЬКО для первой строки

#html #css #angular

#HTML #css #angular

Вопрос:

У меня есть HTML, подобный этому

  <div class="scx-individual-supplier" *ngFor="let request of suppliers" >
      <div>
      <scx-indv-supplier
          class="row"
          *ngIf="!(request.status === 'CANCELLED' amp;amp; 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;
}

1. Вы пытаетесь добавить границу к родительскому элементу или к дочернему div элементу?

2. РОДИТЕЛЬСКИЙ элемент <div class=»scx-individual-supplier» *ngFor=»разрешить запрос поставщиков» >

Ответ №1:

Используйте индекс ngFor: *ngFor="let item of items; let i = index" Затем в вашей стихии используйте
[ngClass]={i === 0 ? 'styleWithoutTopBorder' : 'styleWithTopBorder'}

Тот самый ? это троичное выражение, которое выбирает css-класс в зависимости от результата i === 0.

обновление: с помощью кода

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' amp;amp; request.durationDays > 179)"
          [request]="request"
          [requestId]="request.requestId"
        ></scx-indv-supplier>
      </div>
    </div>
<div>

1. @nickolas Это единственный правильный способ при стилизации элементов в цикле в зависимости от его индекса.

2. можете ли вы написать css для этого

3. ваш код выдает ожидаемую ошибку Отсутствует: в столбце 4 в [{i === 0 ? ‘noTopBorder’ : ‘withTopBorder’}] в ng:///SuppliersModule/SuppliersComponent.html@45:88 (»

4. Ожидаемая ошибка синтаксического анализатора: отсутствует: в столбце 4 в [{i === 0 ? ‘noTopBorder’ : ‘withTopBorder’}] в ng:///SuppliersModule/SuppliersComponent.html@59:2 (» <div class=»scx-individual-supplier» *ngFor=»разрешить запрос поставщиков; пусть i = index» [ОШИБКА ->][ngClass]=»{i === 0 ? ‘noTopBorder’ : ‘withTopBorder’}» >

Ответ №2:

Вы можете использовать first переменную, предоставленную ngFor :

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

1. как насчет css, какие-либо изменения для записи в css

2. можете ли вы написать css для этого

3. .no-border { border-top: none; } это правильный css

4. но это не удаляет мою границу сверху для первой строки, что является первым?

5. @nickolas angular.io/api/common/NgForOf#local-variables