尝试使用 ngfor 填充模板，其中前 2 个元素应显示为一行，

Question

我正在尝试提交此任务，通过 ngFor 迭代数组，我必须在一行中显示该数组的前 2 个元素，然后在降序列中显示其他元素。种类：

first  second

third

fourth

fifth

..nth

为此，我遍历数组并尝试应用 ngclass 来调节我设置的前两个元素：

                    <div class="d-flex flex-row">
                      <div *ngFor="let item of array; let i = index">
                        <span [ngClass]="{ 'd-flex flex-column': i > 1 }">
                          <div>{{item}}</div>
                        </span>
                      </div>
                    </div>

但这并不清楚，因为所有元素仍按行显示。关于如何改进这一点的任何评论？提前致谢

Answer 1

SPAN 或 DIV flex CSS 样式的容器在同一行中对齐内容需要将任何内容包装在它自己的 DIV 中。

在下面的代码中，我删除了第一行中的 d-flex CSS 类和 SPAN 中的 flex-column CSS 类，以将 div 内容保留到前两项在同一行。

在您可以将前两个元素放在同一个容器元素中的 flex 中之前，您需要事先需要它们的值。或者，将前两个值存储在组件代码中列表的第一个元素中，并将它们作为数组的第一项读取并输出到每一行。

试试这个：

<div class="flex-row">
    <div *ngFor="let item of myArray; let i = index">
        <span *ngIf="i==0">
            <div class="d-flex">
                <div>{{myArray[0]}}</div>
                <div>&nbsp;</div>
                <div>{{myArray[1]}}</div>
            </div>
        </span>
        <span *ngIf="i==1">
        </span>
        <span *ngIf="i>1">
            {{item}}
        </span>
</div>

以上内容将为您提供所需的输出。