行中的ngFor元素
ngFor是Angular框架中的一个指令，用于在模板中循环渲染元素。它可以遍历一个集合，并为集合中的每个元素生成相应的HTML代码。
ngFor的语法如下：
*ngFor="let item of items; let i = index"其中，items是要遍历的集合，item是集合中的每个元素，i是元素的索引。
ngFor的优势：
- 简化了循环渲染的过程，减少了重复的代码。
- 提供了灵活的控制，可以根据集合的变化自动更新视图。
- 支持对集合进行过滤、排序等操作。
ngFor的应用场景：
- 列表展示：可以用于展示商品列表、新闻列表、用户列表等。
- 表格展示：可以用于展示数据表格，每行代表一个数据项。
- 动态表单：可以根据集合动态生成表单控件。
推荐的腾讯云相关产品： 腾讯云提供了云原生应用引擎（CloudBase）产品，它是一款支持多种编程语言的云原生应用托管服务。您可以使用CloudBase来部署和运行基于Angular框架开发的应用，无需关心服务器运维和扩展性问题。
产品介绍链接地址：腾讯云云原生应用引擎
请注意，以上答案仅供参考，具体的产品选择应根据实际需求和情况进行评估。
相关·内容
1回答
我只是检查trackBy选项的*ngFor。在互联网上可用的大多数示例中，它表明，如果默认情况下不使用trackBy选项，则会重新生成整个DOM。例如，如果我们有一个表和3行(它们是用ngFor生成的)，在添加另一行之后，您可以在控制台中看到所有4行都是重新生成的。如果您使用trackBy，它将只呈现第4行，而前面的3行将保持原样。
但令人困惑的部分出现在这里。我尝试用带有角4的表行来再现这个示例，当我尝试用ngFor添加新行时(而不使用trackBy)，它神奇地不会为我重新呈现整个DOM，而是精确地重新呈现最后一行。如果我添加trackBy函数，它不会改变DOM重新呈现的方式。
只是想知道，
浏览 0提问于2018-06-08得票数 0
回答已采纳
2回答
我有一个使用ngFor在angular2中动态生成的表，我希望对偶数行的颜色与奇数行的颜色有所不同。
<div *ngIf="AreThereMyOldMessages">
<div *ngFor="let oldm of MyOldMessages;let i of MyOldMessages.length">
<tr>
<td>{{i}}<br>
{{oldm.text}}
</td>
浏览 2提问于2017-11-12得票数 1
回答已采纳
3回答
是否要停止ngFor循环，将每个元素放在新行上？
这是我现在的代码
<div class="groups">
<h3>Groups:</h3>
<div *ngFor="let group of groups; let i = index" class="group">
<button (click)="changeGroup(i)">{{group}}{{i}}</button>
</div>
</di
浏览 0提问于2018-09-01得票数 1
回答已采纳
1回答
我已经创建了一个帖子数组，当我使用*ngFor显示它时，它的标题和内容都没有显示。
这是组件的ts文件的代码。
posts = [
{
title: 'first',
content: '...'
},
{
title: 'second',
content: '...'
}
]
这一行代码位于全局视图app.component.html中。
<app-mon-post *ngFor="let post of posts">{{ post.title }} </app-mon-
浏览 0提问于2019-07-15得票数 2
回答已采纳
我正在创建一个角2组件来显示标记(就像在StackOverflow下面的问题中所示)。但是在我的场景中，我只有有限的空间来显示标记，因为我只能使用一行。如果有更多的标签不能显示，我想用一个数字来表示它们，显示有多少个标签是看不见的。
例如,
如果有足够的空间- apple
如果没有-apple香蕉
有什么方法可以使用自定义管道(与ngFor一起使用)来完成此操作吗？
目前，我正在使用ngFor呈现所有标记，并使用css将它们放置在一行。
<div
*ngFor="let tag of tags"
class="tag"
[ng
浏览 1提问于2017-02-25得票数 1
2回答
角嵌套可拖行和列
、、、、
我看过的资源：
描述类似问题的问题：
我正在使用ng2-dragula，并且我正在尝试使用嵌套的可拖项，但是我无法从我的生活中知道如何做，尽管我看了示例。
这一项允许将列从一行拖到另一行，很好：
<div>
<row *ngFor="let row of rows" dragula="columns" [dragulaModel]="row?.columns">
<column *ngFor="let column of row?.columns"></column>
浏览 1提问于2018-01-18得票数 2
回答已采纳
我正在使用angluar2和TypeScript创建一个表。我不知道如何使同一行<select>的每个<td>中的<tr>是独立的。我的代码允许用户从任何列中选择一个选项。一旦用户选择一个选项，同一行中的所有列都将被更新。
<!--
public _tableHeaders: Array of Object;
public _rosters: Array of Object;
public _dutyOptions: Array of Object;
-->
<div class="row">
浏览 1提问于2017-03-24得票数 0
回答已采纳
3回答
我对角真的很陌生。我发现很难从数组中获得一个条目，并在该组件中的相关html文件中输出。下面的代码显示了bill-item.component.ts文件的onClick函数
arr: Array<any> =[];
itemArray: Array<any> =[];
onAddToBill(itemId:string, name:string , expireDate:string , quantity:string){
this.itemArray.push([itemId,name,expireDate,quantity]);
浏览 4提问于2020-05-14得票数 1
回答已采纳
1回答
<ion-list>
<ion-item-sliding #item>
<ion-item class="green">
<ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
浏览 0提问于2018-02-08得票数 0
回答已采纳
1回答
我在ionic and angular是个新手。我从一个二维数组和两个按钮“下一列”和“下一行”动态地创建了一个网格。 <ion-grid >
<div *ngFor="let row of grid">
<div *ngFor="let div of row" class="no-color">
{{div}}
</div>
</div>
</ion-grid>
<ion-button (click)=&#
浏览 11提问于2020-08-05得票数 0
1回答
我刚刚实现了这个引导表：
以下是它的html定义：
<div class="card card">
<div class="header">
<div class="typo-line">
<h4>Suivi des approbations</h4>
</div>
<!-- <h4 class="title">Table on Plain Background
浏览 1提问于2019-05-16得票数 2
回答已采纳
在ngFor指令中，如何能够通过ElementRef访问特定的ngFor项？为了表明这一点：
<div>
<div class="color"></div>
<ul>
<li *ngFor="let item of numberList">
<div class="innercolor" #innercolor></div>
<p (click) = "onItemClick()" >{{item
浏览 4提问于2021-04-29得票数 1
1回答
我需要在表格中显示一个d3条形图。表行是动态的，我使用ngFor动态地创建行。由于某种原因，图表没有显示出来。请看一看它的凸点。
<tr *ngFor="let item of itemsList">
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td><bar-chart [chartData]="item.cData"></bar-c
浏览 0提问于2017-05-22得票数 2
回答已采纳
1回答
我正在重新设计一个表，我想介绍我自己的定制组件，而不是默认的TR元素。这张桌子的工作原理是这样的，看起来是这样的。
<table>
<thead>
<tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr>
</thead>
<tbody>
<tr *ngFor="let row of this.rows"></tr>
</t
浏览 2提问于2017-05-08得票数 6
回答已采纳
在我的角5应用程序中，我循环创建tr元素：
<tr *ngFor="let element of elements">
但我只想在符合某些条件的情况下显示这一行。我知道我不能在一起使用*ngFor和*ngIf，但我不知道如何解决这个问题。
我看到一个帖子说要在tr中添加一个带有[ngIf]结构的模板，但这似乎不再是有效的语法了。如果我像这样尝试：
<tr *ngFor="let element of elements">
<template [ngIf]="element.checked || showUncheck
浏览 1提问于2018-02-06得票数 2
回答已采纳
我希望在Angular v5中设置双向绑定，特别是使用Angular材质选择列表。
我基本上有以下示例代码，它是一个HTML表的片段，并假设当呈现在屏幕上时，只会出现两行，即：
<tr *ngFor="let currentHero of currentHeroes; let in = index-{{in}}">
<td>
<mat-form-field>
<mat-select [(ngModel)]="currentHero.product" name="product"&g
浏览 3提问于2018-05-01得票数 0
2回答
我正在尝试在ngFor指令之外使用它来计算表中的行数，如以下代码所示
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">IP</th>
<th scope="col">Session_ID&
浏览 2提问于2018-10-24得票数 0
我试图将由*NgFor生成的元素排序为每一行3个元素。
目前，这段代码将"cont“的所有内容放在一行中。
<div fxLayout="row">
<mat-card *ngFor="let item of cont">
<p>{{item.title}}</p>
</mat-card>
</div>
但我想要的是：
item.title1 item.title2 item.title3
item.title4 item.title5 item.title6
浏览 10提问于2022-10-07得票数 0
回答已采纳
我的表单组件具有更改检测策略onPush。我在ngFor中有一段代码： <div *ngFor="let externalLink of edited.externalLinks">
<input #xctrl="ngForm" type="text" class="form-control" id="extId" required [(ngModel)]="externalLink.extId" ngControl="linkExtId_{{externalLink
浏览 15提问于2019-04-10得票数 1
1回答
我在编辑由"ngFor“创建的列表中的行时遇到了问题。该行由另一个复杂组件列表组成。当我点击一个行项时，我想把它放入编辑模式。 我只需切换一个标志并创建“编辑组件”，就可以将其置于编辑模式。但问题是，创建过程需要很长时间。 为了说明这一点，我可以向您提供这些代码。 第一种方法：(将组件切换到编辑模式) list.component.html <div *ngFor="row of rows">
<my-row [row]="row" (click)="putRowIntoEditMode"></my-
浏览 15提问于2019-03-02得票数 0
3回答
在角2+中具有*ngFor需要通过创建n个元素数组来构建可迭代(行)：
<table>
<tr *ngFor="let row of rows">
</tr>
</table>
有一种对数字进行迭代的方法？提前谢谢。
浏览 1提问于2018-01-23得票数 2
回答已采纳
我要求始终在一个表中显示至少5行(5行或更多行)。例如，如果数据库中有2行可用，我需要在UI中显示另外3行空行。 这是我到目前为止尝试过的： <div *ngFor="let task of tasks; let i = index">
<div class="rowDiv">{{task.id}}</div>
</div> 这里我想运行从i= tasks.size到i<= 5的循环，这样我在UI中总共有5行。如何做到这一点？ <div *ngFor=" let i = index&#
浏览 50提问于2020-05-26得票数 0
回答已采纳
我正在尝试做以下几件事：
<div *ngIf="(observable$ | async) as results?.length > 0"> <-- here is the error
<span *ngFor="let result of results>{{result}}</span>"
即，仅当结果可用且有多个结果时才绘制此<div>
第一行<div>导致错误。存在两个<div>的解决方案：
<div *ngIf="(observable$ | asy
浏览 40提问于2020-02-11得票数 1
回答已采纳
我正在使用Angular 6构建一个基本的网格组件。网格本身是一个<table>，它有一个用于标题的<thead>和一个<tbody>部分，其中有多行。每一行都有一个固定的第一列(它具有行的ID )、一个动态的“位置”数和一个固定的最后一列(它持有一个动作组合按钮)。每个位置都包含一个从外部树组件拖动的对象列表。其中的所有行、位置和对象列表都是从DB生成的，并使用*ngFor在组件模板中显示。
为了清楚起见，这里有一个网格的模式：
网格是这样构建的：
<table #mainGrid>
<thead>
[...]
浏览 0提问于2018-09-18得票数 0
我正在尝试创建一个响应表，其中包含未定义的行数和列数，其中每个单元格都有一个角2+ *ngFor的记录出现。
例如，如果我的数组有9条记录，而我的页面大小在每一行中只包含4条，那么我希望3行包含4列，并按照以下顺序排列：
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 |
在本例中，我的数组类似于：
imgList = [
{name: '1', path: '/images/first/'},
{name: '2', path: '/images/second/'},
浏览 0提问于2018-07-05得票数 0
回答已采纳
我正在试验angular2 2.0.0-beta.0
我有一个表，行内容是由angular2以这种方式生成的：
<table>
<tr *ngFor="#line of data">
.... content ....
</tr>
</table>
现在，这是可行的，我想将内容封装到一个组件“表行”中。
<table>
<table-line *ngFor="#line of data" [data]=
浏览 3提问于2016-01-01得票数 119
回答已采纳
2回答
我想在一行中使用ngIf和ngFor。我知道这不可能，但有没有其他方法可以做到这一点？
下面是我的代码：
<option *ngIf="tmpLanguage.id!=languages.id"
*ngFor="let tmpLanguage of languages" [ngValue]="tmpLanguage.id">
{{tmpLanguage.identificatie}}
</option>
浏览 4提问于2016-09-19得票数 5
回答已采纳
2回答
NgIf和NgFor在同一个元素中以减少DOM中的元素
我的情况是：
<li *ngFor="let item of array; let i = index">
<content *ngIf="i < someVar"></content>
</li>
我想要的情况：
<li *ngFor="let item of array; let i = index" *ngIf="i < someVar">
<content></c
浏览 3提问于2019-11-27得票数 0
回答已采纳
任何帮助或暗示都将不胜感激。我在引导4中使用了角8。这是我的home.component.html。
<table class="table" border="0">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col&
浏览 2提问于2019-12-03得票数 1
2回答
我有一个创建多个PrimeNG按钮的ngFor。现在，这些按钮在同一行中一个接一个地出现--我希望每个按钮都垂直地显示在其在线上。你是怎么做的呢？下面是我的ngFor代码：
<button pButton type="button"
*ngFor="let atrConfig of atrConfigs; let i = index"
(click)="selectConfiguration(atrConfig)" label = "">
Name:
浏览 3提问于2017-01-31得票数 5
回答已采纳
5回答
我有一个固定的模板结构，只打印一行中的两个项目，如下所示，我需要使用ngFor指令进行迭代： <div class="row" *ngFor="let item of cityCodes; let i = index">
<div class="col-6" (click)="cityClick(item.key)">
<div class="img img-1">
</div>
<div class="
浏览 41提问于2019-02-22得票数 1
回答已采纳
1回答
我正在使用ngFor从两个数组创建一个表
<tr *ngFor="let e of lis1; let k=index">
<td>{{e}} </td>
<td>{{lis2[k]}}</td>
</tr>
创建的表如下所示
Name Age
a 15
b 20
c 25
我想更改年龄大于20岁的行的颜色。如何设置此条件？我用的是棱角打字本。
在lis1中，我有一个名称数组(a，b，c)，在lis2中，我有一个年龄数组(
浏览 12提问于2022-03-03得票数 0
回答已采纳
我有以下表代码：
<tbody>
<div *ngFor="let lin of items | paginate: { itemsPerPage: 10, currentPage: bus.page, totalItems:oResponse.total }" style="border: 1px dashed blue;">
<tr class="accordion-toggle" data-toggle="collapse" data-target="#{{lin.id}}
浏览 1提问于2018-11-22得票数 1
回答已采纳
我使用的是Angular 5，并且有一个表，其中我使用*ngFor创建表行，并为它们提供一个id，即用户名。
<tbody *ngFor="let User of FullTable; let i = index">
<tr id='{{User.username}}'>
<th scope="row" style="vertical-align: middle;">
{{User.username}}
</th>
</tr>
</tbody
浏览 0提问于2018-05-24得票数 0
2回答
<div *ngFor = "let val of values">{{val}} </div>
值数组中有3个值。每个val都是用不同的线条打印的。我要把所有的三笔钱都排在同一条线上。怎么做？？救命啊！！
编辑:即使使用span，也给出了3行输出
浏览 8提问于2022-05-17得票数 -1
1回答
我有一个非常简单的角度应用程序，创建一个项目表，说“产品”。 我有一个名为"Products“的组件和一个名为product-item的子组件(如果这是术语的话)。 我的问题是子组件中的行的列跨度。作为测试，我执行了以下操作来显示我的问题： 在"Products“组件中，我有以下HTML： <table [ngClass]="{'blueTable':true}">
<thead>
<tr>
<th>head1</th>
<
浏览 18提问于2021-10-13得票数 1
回答已采纳
2回答
我使用innerHtml来显示来自angular变量的html内容，但它不支持外部样式和ngFor also.in，只要用户单击添加服务按钮，就会在下面的屏幕上增加一行。
这是服务列表中包含的数据。
<div class="col-sm-6 col-md-4">
<label class="mobileNumberLabel " for="mobilrNumber">Select Service</label>
<div class="nice-wrap">
浏览 0提问于2018-11-15得票数 0
我有一个带有复选框的表，我希望在单击表行单元格中的复选框时获取特定行单元格的表头。它将只返回单击单元格所在的标题。我试着做这样的事情：
<table class="table">
<thead>
<tr >
<th></th>
<th scope="col" *ngFor="let columnNames of tableHeaderNames">{{columnNames}}</th>
</
浏览 0提问于2021-03-16得票数 2
回答已采纳
2回答
我想在Angular 2中使表格的每一行都可点击。但是，只有包含数据的单元格的部分是可点击的。即，如果一个单元格比另一个单元格包含更多的数据，因此具有更大的高度，则较小单元格的空位不可点击。
例如，在下面的页面中，第一个单元格只能在包含名称的行上单击，而第二个单元格的整个单元格都可以单击
<table>
<thead></thead>
<tbody>
<tr *ngFor="let item of items" routerLink="/otherpage/{{item.Id}}
浏览 3提问于2017-07-26得票数 2
我已经被困在这件事上了，我弄不清楚这个问题。我想我可能只是运气不好，因为querySelectorAll不是很.角质的。
我已经将多级菜单实现到一个应用程序中: tympanus.net/codrops/2015/11/17/multi-level-menu/。
效果很好。太完美了。
除了，当我使用*ngFor创建菜单和子菜单时。
<section class="list">
<nav id="ml-menu" class="menu">
<button class=&
浏览 0提问于2017-10-06得票数 0
回答已采纳
1回答
我想知道是否有一种方法来呈现由*ngFor在角2中创建的元素？
我使用基于flex属性的引导4网格系统。我在我的Angular2应用程序中有这样的代码：
<div class="outlet container">
<div class="row itemsBlock">
<div *ngFor="let item of items" class="itemRender">
<img class="itemImage" src="{{item.
浏览 1提问于2017-04-02得票数 2
回答已采纳
1回答
我想检查.ts中的数组在html '*ngFor‘中创建的元素，但是我没有找到有关它的文档。
.ts：
steps: Array<number> = [1, 2, 3, 4, 5];
html：
<section class='mycontainer'>
<article class="myArticle{{ steps.length }}">
<div class='line'></div>
<div *ngFor="let numberSt
浏览 1提问于2018-04-25得票数 0
回答已采纳
我用，fa fa-star和far fa-star在角上创建了一个星级组件.
这是HTML输出，我想要在组件中。
<div style="font-size: 80%">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i&
浏览 3提问于2019-05-28得票数 2
回答已采纳
我在logsCompoment.ts中有一个名为logs的数组，我将新的日志推送到这个数组中，并使用ngFor在html页面中写入日志。我做这件事的方法如下。
this.socket.on('newline', (data) => {
this.logs.push(data);
}
});
在logsCompoment.html中，我会跟踪显示日志。
<li *ngFor="let log of logs" [innerHTML]="log">
浏览 0提问于2018-10-11得票数 1
回答已采纳
1回答
角7键式
、
我正在尝试构建一个带有角7的表，该表有一个父组件，每个行都有子组件，但第一行除外。我正在将keyvalue管道值传递到每一行，在子组件显示之前，我还首先遍历父组件中的keyvalue对(参见图)。我使用ngFor循环键值对，但我正在与它在子组件中显示的顺序作斗争。我知道默认情况下，键值是根据键的字母顺序返回的。我能够在父组件null上为它的表达式设置use ngFor，并且它工作得很好，但是当我尝试对表达式使用null时，子组件中出现了一个错误。我得到的是：
table.component.ts
这是出口类的。
intervals: {[key: string]: string} = {
浏览 0提问于2019-01-25得票数 1
回答已采纳
issue case in stackblitz 问题:如何实现angular-material中的mat-chips在一行中(因为它们是标准的)，但是当通过mat-chip-list中的ngFor循环(在mat-cell中)时，它们都被放在单独的行上(请参阅“名称”一栏)。 目标:我想让它排在每一条线上，直到由于宽度限制而中断(参见“权重”一栏)。 名称为逗号分隔的字符串元素(例如A、Z)的片断应在行上相邻： const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'A, Z', wei
浏览 12提问于2019-03-21得票数 6
回答已采纳
我在任何地方都找不到关于这些差异的很好的描述。*ngIf和ngIf也是如此
*ngFor的一个例子
<li *ngFor="let video of page" ...>
<img src="api/Videos/{{video.id}}/thumbnail">
</li>
和一个ngFor的例子
<template ngFor let-labelid [ngForOf]="labelLookup | keyValueFilter" >
<label [ngStyle]="{
浏览 0提问于2016-10-20得票数 9
回答已采纳
我有一个二维数组。
var arr = [
{ ID: 1, Name: "foo", Email: "foo@foo.com", isChecked: "true" },
{ ID: 2, Name: "bar", Email: "bar@bar.com", isChecked: "true" }
]
所以我想在表中显示数据。
this.tableData = arr.map(function (obj
浏览 3提问于2020-03-24得票数 0
回答已采纳
我需要切换模板。我有12个css文件需要动态加载
我有一个模板html。例如，它是有效的(硬编码)：
<div class="container">
<link rel='stylesheet' href="/app/switchTemplate/css/amelia/bootstrap.min.css" *ngIf="currentTheme.name === 'amelia'" />
</div>
当我使用标记"href“的<*ngFor="
浏览 0提问于2016-10-24得票数 3
我知道在angular 2中有基本的双向绑定，如文档所示。
我有一个persons数组，我用它来构建一个html列表：
现在，当我点击一个人的行时，我可以使用双向绑定来编辑它：
<form>
<label>Name: </label>
<input [(ngModel)]="selectedPerson.name" name="name"/>
<label>Description: </label>
<input [(ngModel)]="s
浏览 4提问于2016-10-03得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
