Question

因此，我一直在尝试使用* ngFor遍历对象数组，并将两个元素放在一行中。将每两个componenet添加到一行后，应生成一个新行，依此类推。

到目前为止，我已经尝试过以下操作：

<div class="row" *ngFor="let prod of products; let i = index; let even = even">
<span *ngIf="even">
    <div class="col-md-6 offset-3">
        <div>
            <img src="{{ prod.imagePath }}" alt="{{ prod.name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
        </div>
        <div>
            <h2>{{ prod.name }}</h2>
        </div>
        <div>
            <h3>Price: {{ prod.price }}</h3>
        </div>
    </div>
    <div class="col-md-6 offset-3">
        <div>
            <img src="{{ products[i+1].imagePath }}" alt="{{ products[i+1].name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
        </div>
        <div>
            <h2>{{ products[i+1].name }}</h2>
        </div>
        <div>
            <h3>Price: {{ products[i+1].price }}</h3>
        </div>
    </div>
</span>

我已经检查了在这里可以找到的所有相关问题，但似乎没有一个可以解决我的问题。

此刻，无论我做什么，每个元素都会进入自己的行。

我尝试更改每个元素的容器大小，但无济于事。

在此先感谢您的帮助！

Answer 1

执行此操作的最佳方法是通过转换产品数组的结构，使其成为数组数组。这样，您想要的结构就很容易遍历和打印。

您可以使用@app.route('/user/<user>', defaults={'width': None, 'height': None}) @app.route('/user/<user>/<width>/<height>') def user(user, width=None, height=None): if not width or not height: return """ <script> (() => window.location.href = window.location.href + ['', window.innerWidth, window.innerHeight].join('/'))() </script> """ return 'Hello %s (%s, %s)' %(user, width, height)进行转换。例如：

pipe

，然后在您有@Pipe({ name: 'updateRows' }) export class UpdateRowsPipe implements PipeTransform { transform<T>(value: T[], perRow: number): T[][] { let rows: T[][] = []; for (let i = 0; i < value.length; i += perRow) { rows.push(value.slice(i, i + perRow)) } return rows; } }的地方使用它：

*ngFor

使用ngFor在一行中添加两个元素，然后创建一个新行

1 个答案: