将 *ngFor 数据拆分为 2 列

我有这个html： {{项目.标签}}<... 我有这个html： <div class="w-full flex justify-center"> <div *ngFor="let item of items" class="flex w-1/2"> <span>{{item.label}}</span> <span>{{item.value}}</span> </div> </div> 这样UI中的html显示为： LABEL 1 - VALUE 1 | LABEL 2 - VALUE 2 LABEL 3 - VALUE 3 | LABEL 4 - VALUE 4 LABEL 5 - VALUE 5 | LABEL 6 - VALUE 6 我需要显示这样的数据： LABEL 1 - VALUE 1 | LABEL 4 - VALUE 4 LABEL 2 - VALUE 2 | LABEL 5 - VALUE 5 LABEL 3 - VALUE 3 | LABEL 6 - VALUE 6 我一直在努力寻找可行的解决方案，但运气不佳。你能建议工作解决方案吗？ 将 items 数组分成两半。 chunkedItems: any[][] = []; let halfIndex = Math.floor(this.items.length / 2); this.chunkedItems = [ this.items.slice(0, halfIndex), this.items.slice(halfIndex, this.items.length), ]; } 并按如下方式构建弹性容器： <div class="w-full flex flex-wrap justify-center"> <ng-container *ngFor="let chunks of chunkedItems; let i = index"> <div class="flex flex-col w-1/2"> <div *ngFor="let item of chunks" class="flex"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> </div> </ng-container> </div> 演示@StackBlitz 试试这个代码 {{item.label}} - {{item.value}} {{item.label}} - {{item.value}} @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { items = [ { label: 'LABEL 1', value: 'VALUE 1' }, { label: 'LABEL 2', value: 'VALUE 2' }, { label: 'LABEL 3', value: 'VALUE 3' }, { label: 'LABEL 4', value: 'VALUE 4' }, { label: 'LABEL 5', value: 'VALUE 5' }, { label: 'LABEL 6', value: 'VALUE 6' } ]; firstColumnItems() { return this.items.filter((item, index) => index % 3 === 0 || index % 3 === 1); } secondColumnItems() { return this.items.filter((item, index) => index % 3 === 2); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script> <div class="w-full flex justify-center"> <div class="w-1/2" *ngFor="let item of firstColumnItems()"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> <div class="w-1/2" *ngFor="let item of secondColumnItems()"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> </div>

WinForm 的属性值未设置

场景如下： 我有一个复选框，当初始化表单时，该复选框的 Visible 属性设置为 false。 然后，在程序执行过程中，Visible属性被设置为tr...

使用 CSS 更改输入和文本区域大小（已解决）

问题不是 CSS 本身，而是我的浏览器的缓存错误 部分输入{ 最小宽度：100px； } 问题不是 CSS 本身，而是我的浏览器的缓存错误 section input { min-width: 100px; } <section id="protokoll"> <form action="protokollAbfrage.php" method="post"> <label class="h3" for="KW">New week:</label><br> <input type="text" id="KW" name="KW" placeholder="KW **" required/><br><br> <label class="h3" for="TITEL">New title:</label><br> <input type="text" id="TITEL" name="TITEL" required /><br><br> <label class="h3" for="INHALT">New subtitle:</label><br> <input type="text" id="INHALT" name="INHALT" required/><br><br> <label class="h3" for="TEXT">New text:</label><br> <textarea id="TEXT" name="TEXT" required <></textarea><br><br> <a href=""><button> <?php echo "Submit new Article";?></button></a> </form> 我尝试过类似的东西：section input { min-width: 500px; } 但这没有效果 据我所知，您希望增加输入和文本框的宽度。 要实现此目的，您可以使用 width CSS 属性 section#protokoll input, section#protokoll textarea { width: 440px; } <section id="protokoll"> <form action="protokollAbfrage.php" method="post"> <label class="h3" for="KW">New week:</label><br> <input type="text" id="KW" name="KW" placeholder="KW **" required/><br><br> <label class="h3" for="TITEL">New title:</label><br> <input type="text" id="TITEL" name="TITEL" required /><br><br> <label class="h3" for="INHALT">New subtitle:</label><br> <input type="text" id="INHALT" name="INHALT" required/><br><br> <label class="h3" for="TEXT">New text:</label><br> <textarea id="TEXT" name="TEXT" required></textarea><br><br> <a href=""><button> Submit new Article </button></a> </form> </section> 此外，我还添加了 section#protokoll 来指定要修改哪个部分的输入。

适用于 Android jetpack compose 的自定义可滑动选项卡（材料 3）

我如何制作或者是否有任何库可以用来创建可滑动的自定义选项卡，如下图所示[歌曲、专辑、艺术家、流派 => 选项卡]， 我知道已经有一些选项卡

我们可以在jenkins主动选择参数中读取配置文件（托管文件.properties文件）吗？

我想在主动选择参数grovy脚本中读取我的属性文件，我的属性文件存储在托管文件中。 属性文件看起来像这样 [1]：https://i.stack.imgur.com/flvP5.png ...

成功构建后出现Webpack 5错误！ （未捕获的运行时错误 Inpage.js）

我正在使用 webpack 版本 5： @babel/[email protected] @babel/[email protected] [email protected] [email protected] [email protected] 迷你CSS提取插件@2.9.0 [email protected] 萨斯@1....

如何（从客户端）识别哪个 Azure API 管理后端主机提供了响应？

场景是这样的： |-> 后端#1（功能应用程序） APIM-> |-> 后端#3（函数应用程序） |-> 后端#n（功能应用程序） 我目前正在构建一个部署管道...

抛出未处理的错误 throw er； // 未处理的“错误”事件

` // 服务器/index.js const express = require("express"); const PORT = process.env.PORT || 3001; 常量应用程序 = Express(); app.get("/api", (req, res) => { res.json({ 我...

为什么我的setTimeout()在执行回调函数时会在屏幕上返回一个随机数

我正在尝试通过构建一个测验应用程序来学习 Svelte。 我想要实现的是，当用户回答了测验中的问题时，它会自动跳转到下一个。我设置了一个 setTimeout(...

x 轴标签在保存的图像上被裁剪

所以我试图在数据上绘制条形图，其中 x 是用户名（字符串）并且每个 x 足够长以相互重叠，所以我必须旋转 x 标签。那里没问题。然而，当出口...

如何将集成指纹数据从 Android 平板电脑捕获到我的浏览器 Web 应用程序？

我有一台带有内置指纹扫描仪的平板电脑，我想将设备中的指纹数据访问到我的 NextJS 应用程序中，我一直在寻找库来做到这一点，但没有成功。 然而

应用程序集成的 SQL Server 权限

我创建了一个小型应用程序，并希望通过该应用程序将数据仅发布到数据库中的一张表。为此，我创建了一个具有 sql server 身份验证的用户。我应该有什么权限...

具有外部数据连接的另存为模板

我已经寻找这个问题的答案近一个小时了，但没有运气。我有一个启用 Excel 宏的模板，它将模板保存为新名称（仍为 .xltm），但不幸的是...

如何在GCC中的配置/变量下命名环境变量？

我们注意到，在 GCC 或 config.properties 文件中创建环境变量时，某些变量带有“.”。例如“apd.service.runtimeApiCacheSize”，有些有&...

Autofac：如何防止处置通过ServiceCollection注册的服务？

如果我通过 ServiceCollection 注册所有服务，那么我就能够在重用此集合的不同 DI 实现之间进行切换：Autofac、Simple Injector 或 Microsoft。

lm-evaluation-harness with LoRa 微调模型 Hugging Face

！python -m lm_eval --型号hf --model_args 预训练=theoracle/gemma_italian_camoscio --任务 xcopa_it、hellaswag_it、lambada_openai_mt_it、belebele_ita_Latn、arc_it --设备cuda:0 --batch_size ...

如何获得物理屏幕分辨率？

我正在开发一个Android壁纸应用程序。如何在 Flutter 中找到 Android 设备的真实分辨率以将壁纸设置为全屏。 MediaQuery 不适合，因为它不

使用 Go 模板获取 docker 镜像路径的最后一个元素

我想生成一个合成的 docker ps 表，但我的 docker 映像路径很长。我尝试做的解决方案是仅显示图像名称的最后一部分： 这就是我所拥有的：

如何在ForEach控制器中使用数组数据？获取一个线程组中的数据列表并在另一个线程的 forEach 控制器中使用该变量

在线程一中从 json 提取器获取 EquipmentNumber，并希望在另一个线程中为多个用户使用该数据。由于该 EquipmentNumber 有多个数据，如 EquipmentNumber1、equipmentNu...

Flutter 网页问题

移动应用程序中的屏幕很好，但网络模式下的宽度发生了变化 那么是否有任何其他特定的网络代码，或者我必须更改主要代码，如果我更改代码它也会更改...