javascript - 使用 ngFor 和 ngIf 在数组中迭代两种不同的方式 - Angular
问题描述
我正在尝试获取此数组(最后将来自 API 以生成真实组件):
salesArray = [0, 1, 2, 3, 4, 5, 6, 7];
允许我在 Bootstrap 行和列中多次生成组件。
这个想法是提供两种不同的视图,用户可以通过一个按钮进行切换。这部分与问题没有直接关系。
第一个视图 = 带有 3 col-4 的 Bootstrap 行,因此结果应该是:
0 - 1 - 2
3 - 4 - 5
6 - 7 - 空栏
第二个视图 = 具有 2 col-4 的 Bootstrap 行(不是 col-6,因为将从 API 进一步调用的元素必须保持相同的大小),所以结果应该是:
0 - 1
2 - 3
4 - 5
6 - 7
这是我现在的代码:
<div class="container-fluid">
<div class="row">
<div class="col-9">
<ng-container *ngIf="screenResolution == 'Desktop'">
<ng-container *ngFor="let item of salesArray; let i = index;">
<div class="row" *ngIf="i%3 === 0">
<ng-container *ngFor="let item of salesArray; let i = index;">
<div class="col-4">
{{ i }}
<!-- <srp-sale-block [dataView]=dataToDisplay></srp-sale-block> -->
</div>
</ng-container>
</div>
</ng-container>
</ng-container>
</div>
</div>
</div>
现在,我设法每三个组件生成一行,但在此之后循环再次遍历所有数组,我不知道如何按行仅显示 2 或 3 个数字,然后继续下一个系列. 所以第一行是 0 - 1 - 2,然后是第二行 3 - 4 - 5 ......
谢谢。
解决方案
您可能只需使用[ngClass]
指令即可根据分辨率应用引导列类。如果分辨率是桌面应用类col-4
给你 3 列,否则应用类col-6
给你 2 列。
sales.component.html
<div class="row">
<ng-container *ngFor="let item of salesArray">
<div [ngClass]="
{ 'col-4' : resolution === 'Desktop', 'col-6' : resolution === 'Mobile' }">
{{item}}
</div>
</ng-container>
</div>
不太确定这是否是您要查找的内容。这是一个stackblitz示例...
推荐阅读
- tensorflow - Tensorflow:我的 rnn 总是输出相同的值,没有训练 rnn 的权重
- c# - 用 OleDb C# 覆盖 Excel 文件中的数据?
- android - 在 Android 内存中,图表意味着什么以及为什么它这么大?
- angular - 如何使用角度路由将产品添加到购物车?
- amazon-web-services - 合并计费后 AWS 权限不再起作用
- php - 如何在 Symfony 4 中将 queryBuilder 与 formBuilder 一起使用?
- c++ - flatbuffer unio 只生成枚举
- dji-sdk - 运行第一个教程时出错(导入 SDK 演示)
- dart - JetBrains 的 Dart 插件不会重新分析在 JetBrains IDE 之外修改的文件
- c# - Appveyor:在每个受影响的环境上部署后运行命令