HTML, Поместите элементы из массива сверху / снизу <div>на основе свойства

Question

Я пытаюсь разместить элементы «рядом друг с другом» в верхней или нижней части в зависимости от свойства, называемого «раздел»:

<span *ngFor="let item in [{name:"name1",section:"bottom"},{name:"name2",section:"top"}, 
{name:"name3",section:"top"},{name:"name4",section:"bottom"},{name:"name5",section:"bottom"}]">
    <span *ngIf="item.section=='top'">{{ item.name }}<span>
</span>

The result should look like this:
<div> name2 name3 </div>
<div> name1 name4 name5 </div>

Любая помощь, пожалуйста?Я не могу понять это самостоятельно, спасибо.

Answer 1

вы можете использовать два * ngFor для каждого, включая * ngIf для каждого раздела (верх / низ), например: (учитывая, что ваши данные в свойстве массива называются foo)

<div>
    <ng-container *ngFor="let item of foo">
        <span *ngIf="item.section=='top'">
          {{ item.name }}
        </span>
    </ng-container>
</div>
<div>
    <ng-container *ngFor="let item of foo">
        <span *ngIf="item.section=='bottom'">
          {{ item.name }}
        </span>
    </ng-container>
</div>

если у вас есть более двух допустимых значений для свойства раздела, вы можете использовать этот код, чтобы иметь более динамический шаблон в соответствии с вашими значениями раздела: (учитывая, что у вас есть значения раздела в свойстве массива, называемом bar)

<ng-container *ngFor="let section of bar">
    <div>
        <ng-container *ngFor="let item of foo">
            <span *ngIf="item.section==section">
              {{ item.name }}
            </span>
        </ng-container>
    </div>
</ng-container>

рабочий пример: Пример стекаблиц