如何在NgFor循环中显示角料中每行最多显示5张牌

在NgFor循环中显示角料中每行最多显示5张牌，可以通过以下步骤实现：

首先，确保你已经安装了Angular框架并创建了一个新的组件。
在组件的HTML模板中，使用NgFor指令来循环遍历角料数组。假设角料数组名为cards。

<div *ngFor="let card of cards; let i = index">
  <!-- 在这里显示每张牌的内容 -->
</div>

在NgFor指令中，使用index变量来获取当前循环的索引值。
使用ng-container元素来包裹每行最多显示5张牌的逻辑。在ng-container元素中，使用ngIf指令来判断当前索引是否是每行的最后一个索引（即索引对5取余等于4）。

<div *ngFor="let card of cards; let i = index">
  <ng-container *ngIf="i % 5 === 4">
    <!-- 在这里显示每行最后一张牌的内容 -->
  </ng-container>
</div>

在每行最后一张牌的内容中，可以使用card变量来获取当前循环的角料对象，并显示相应的内容。

<div *ngFor="let card of cards; let i = index">
  <ng-container *ngIf="i % 5 === 4">
    <div>{{ card.title }}</div>
    <div>{{ card.description }}</div>
    <!-- 其他牌的内容 -->
  </ng-container>
</div>

这样，就可以在NgFor循环中显示角料中每行最多显示5张牌。根据实际需求，可以在每行最后一张牌的内容中自定义显示的样式和布局。

请注意，以上答案是基于Angular框架的NgFor指令来实现的，如果你使用的是其他前端框架或库，可能会有不同的实现方式。

页面内容是否对你有帮助？

有帮助

没帮助

如何在NgFor循环中显示角料中每行最多显示5张牌

angular、angular2-forms、angular-material2、ngfor

我想在联系人卡片中显示它。然而，我只想在每一行中显示最多5张联系人卡片。我还想，需要一个分页，如角材料分页器。<div class="col" *ngFor="let yuvak of unAssignedYuvaks | paginate: { itemsPerPage: 30, currentPage: p

浏览 15提问于2019-01-22得票数 1

1回答

如何在for循环中寻址动态元素名？

dart、angular-dart

我有一个一般的角飞镖问题，在一个特定的弹出式情况下为我排列:我如何在一个循环中使用角飞镖的#特殊操作符？问题是，它似乎采用了循环的最后一个矩形:所有用户都在同一个位置打开弹出窗口。<li *ngFor="let activeUser of subject.users"

浏览 3提问于2017-04-05得票数 1

回答已采纳

1回答

我正在写一个角应用程序，它是用角CLI构建的。我的组件中有一个名为globalModel的模型。此模型将使用上一页中的用户输入来构建。在当前页面中，我将在HTML表中向用户显示此模型中包含的数据。_cd.detectChanges();} 这个表的row可以有任意数量的元素，如obj、obj1、obj2、objA、objB、objC、objN、.该数据是根据用户在单选按钮上选择的criteria1为了确定列总数，我尝试使用*ngFor中的setter作为totalColumnsOfTheTa

浏览 1提问于2017-12-18得票数 1

84回答

在<10行简单代码中，最酷的事情是什么？帮助我启发初学者！

language-agnostic

然后，在另一边，我首先创建一个InputBox，并给出了如何显示它的一些说明。当我点击输入框中的enter时，它会计算或“返回”我输入的内容。(提示：我是从InputBox那里得到的。

浏览 22提问于2009-05-01得票数 406

回答已采纳

127回答

OEIS的演化

code-challenge、number、sequence、answer-chaining

您也可以使用任何合理的索引，如0索引，1索引，或索引列在序列的OEIS页面上的“偏移”下，这并不重要。第一个索引产生的术语必须与OEIS条目的第一个项相匹配。

浏览 0提问于2015-04-26得票数 58

204回答

这个数字是质数吗？

code-golf、number、number-theory、primes、decision-problem

有些语言，如文件夹，是有点棘手的得分。如果有疑问，请在元数据上询问。## Language Name, N bytes## Perl, 43 + 2 (-p flag) = 45 bytes 您还可以将语言名称作为链接，然后将其显示在代码段中

浏览 0提问于2015-09-11得票数 232

164回答

"DDoouubbllee ssppeeaakk！“

code-golf、string

AuthorLanguageSize {{PLACE}}{{NAME}}{{LANGUAGE}}{{SIZE}} {{LANGUAGE}}{{NAME}}{{SIZE}} 为了确保您的答案显示出来其他信息可能包括设置的标志和如果你已经提高了你的分数(通常是一个剔除数字，如M)。N应该是这个标题中最正确的数字，第一个,之前的所有内容都是您使用过的语言的名称。语言名称和单词bytes可能是链接。

浏览 0提问于2019-07-31得票数 92

330回答

一个接一个

math、code-challenge、sequence、answer-chaining

截至2018年3月13日16:45，获奖者是答案#345，由库尔德雷塞特·纳巴里亚执掌。这意味着比赛正式结束，但只要他们遵守规则，就可以继续发帖。同样，根据答案的数量，简单地向前三位回答者大声呼喊: 1. NieDzejkob - 41答案2. KSmarts - 30答案3. 超中子 - 26答案此答案链接问题将以下列方式工作：下一个用户(让我们称他们为userA)将找到其索引号(参见下面)与我的代码长度相同的OEIS序列。使用这个序列，他们必须用一种未使用的语言编码一

浏览 0提问于2017-07-21得票数 109

回答已采纳