Как условно добавить элемент в цикл `* ngFor`?

Question

Я перебираю элемент li. в первом li требуется иметь дочерний элемент span. как этого добиться?

вот моя попытка:

    <ul class="country-list">
            <li *ngFor="let country of supportedCountries; let i = index ">
                    <span *ngIf="i===0" class="drop-down">{{country}}</span> {{country}}
            </li>
   </ul>

Answer 1

вы можете использовать ng-container без дополнительного элемента DOM и любое значение i, которое вы хотите:

<ul class="country-list">
    <li *ngFor="let country of myArray; let i = index ">
        <ng-container *ngIf="i===0">
            <span class="drop-down">salam</span> 
        </ng-container>
    </li>
</ul>

Answer 2

директива NgForOf также имеет переменную 'first':

<ul class="country-list">
  <li *ngFor="let country of supportedCountries; let first = first ">
     <span *ngIf="first === true" class="drop-down">{{country}}</span>      
     <ng-container *ngIf="first === false">{{country}}</ng-container>
  </li>
</ul>