如何使用ngFor创建数组
ngFor是Angular框架中的一个指令，用于在模板中循环渲染数组或可迭代对象的元素。通过ngFor，我们可以轻松地创建和管理数组的视图。
使用ngFor创建数组的步骤如下：
- 在组件中定义一个数组，并将其初始化为所需的值。例如，我们可以在组件类中声明一个名为"items"的数组，并将其初始化为空数组：
items: any[] = []; - 在模板中使用ngFor指令来循环渲染数组的元素。在需要循环的元素上添加一个带有"*ngFor"属性的标签，并指定循环的数组和当前元素的别名。例如，我们可以使用以下代码来循环渲染数组中的每个元素：<ul> <li *ngFor="let item of items">{{ item }}</li> </ul>
在上述代码中，"*ngFor"属性指定了要循环的数组为"items"，并将当前元素的别名设置为"item"。在循环的每一次迭代中，模板会渲染一个li元素，并显示当前元素的值。
- 在组件中更新数组的值。如果需要动态地改变数组的内容，可以在组件类中使用相应的方法来添加、删除或修改数组的元素。例如，我们可以在组件类中添加一个方法来向数组中添加新的元素：addItem() { this.items.push('New Item'); }
在上述代码中，addItem方法会向items数组中添加一个值为'New Item'的新元素。
通过以上步骤，我们可以使用ngFor指令轻松地创建和管理数组的视图。ngFor的优势在于它提供了一种简洁而强大的方式来处理数组的渲染和更新，同时也提高了代码的可读性和可维护性。
ngFor的应用场景包括但不限于：
- 在一个列表中显示动态数据
- 渲染多个相似的组件或元素
- 创建动态表单控件
- 显示分页数据
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，无法给出相关链接。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择相应的产品。
相关·内容
2回答
我使用角4动态显示一组列。因此，只有在运行时，我才知道列的数量，以及需要在表中显示的列数。
显示列的代码是这样的-
<tr *ngFor="let result of results">
<td *ngFor="let col of searchResultColumnNames" >
{{ result[col] }}
</td>
</tr>
现在，我需要给它加上一个条件。如果列名是一个与
浏览 3提问于2017-11-09得票数 1
回答已采纳
我需要用ngfor在angular2中创建条件。sql中的此条件为
select foo from fos where id in (@params)
我需要用*ngFor在angular2中做这件事，我有这个代码
<form>
<ion-list *ngFor="let g of grids">
<h1>{{title}}</h1>
<div class="table-responsive">
</div>
</i
浏览 3提问于2017-02-02得票数 1
1回答
嗨，我对Ionic/Angular很陌生，我想知道ngFor是如何工作的。
我有一个网站，并希望创建一个应用程序这个网站与Ionic。该网站有一家商店，分为4类：
巧克力
盘子
拉吉
篮
我希望对每个类别使用ngFor。每个类别都有幻灯片。我怎么能意识到这一点？此代码显示所有产品：
<ion-slide *ngFor="let product of products">
如何使用ngFor显示特定类别。
浏览 4提问于2017-10-23得票数 0
2回答
我在ts文件中创建了数组，并使用ngFor从数组中获取元素，但是当我使用键值时，角将自动对数组进行排序。如何像创建数组一样保存顺序。
TS代码：
filterListingTypeItems: { [key: string]: object } = {
'For sale': [
'For sale',
'By Agent',
'By ownre',
'New Construction',
'Foreclosures',
浏览 0提问于2018-12-21得票数 2
回答已采纳
1回答
我需要提供简单的年数数组数据。什么是正确的创建:管道或典型的服务类？
同样，那是管道。那么，我能在ngFor中这样迭代这个管道吗：
ngFor="item of pipe()"?
浏览 6提问于2017-08-17得票数 0
回答已采纳
2回答
我的目标如下：
itemList = {
"0": [],
"1": [],
"2": [],
"3": []
};
我还有下面的*ngFor
<div *ngFor="let new of news; let newindex = index;">
<div *ngFor="let item of itemList.newindex">
</div>
</div>
如您所见，我正在尝试访问itemList[0]
浏览 0提问于2018-04-10得票数 3
回答已采纳
3回答
*ngFor的递减指数(角)
、、、、
使用角4.0.2，我有一个*ngFor创建输入元素，并通过add按钮更新一个对象数组，但是我试图弄清楚如何在从该数组中删除项目后更新对象的标识符。
目前，我的ngFor看起来是：
*ngFor = let name of names; let i = index
然后，删除按钮有一个(单击)事件：
(click)="removeRow(i, names)"
该方法如下所示：
removeRow(index:number, names:Names[]){
names.splice(index,1);
index--;
}
但是，在删
浏览 4提问于2017-06-21得票数 0
回答已采纳
是否可以在*ngFor中创建局部变量？例如：
<div *ngFor="let user of users; let myVariable = 0">
浏览 9提问于2018-01-08得票数 8
1回答
我已经创建了一个JSON对象，它包含与CSV文件字段相对应的数组，这些字段是使用库Parse解析的。我想在HTML中显示这些内容，但我不知道如何从JSON对象中提取数组，并将它们放入一个变量中，以便它可以在html中显示。
打字脚本
func(){
this.fileHasBeenUploaded = true;
this.csvData = reader.result as string;
console.log(this.csvData);
console.log(this.papa.parse(this.csvData));
this.resul
浏览 0提问于2019-07-15得票数 0
回答已采纳
3回答
这就是我的例子：
my-list.component.ts:
export class MyList implements OnInit {
values: Observable<number>;
ngOnInit(){
this.values= Observable
.from([1, 2, 3, 4, 5])
.map(function (value) { return Observable.of(value).delay(2000); })
.concatAll();
// this.values.subscribe(x =>
浏览 7提问于2019-10-10得票数 1
回答已采纳
我让一个ngFor在一个同时经过过滤和分页的表中创建行。
<tr *ngFor="#d of data.results | filter:filterText | pagination:resultsPerPage:currentPage">
页面上还有另一个元素，用于显示所显示的记录数。这些元素最初被绑定到data.Results的长度。
如何获取应用过滤器管道后显示的数据的长度，以便正确显示。ngFor中提供的所有局部变量似乎都无法解决这一问题。
浏览 31提问于2016-03-18得票数 29
回答已采纳
我正在尝试创建一个搜索过滤器来按某个类别过滤结果。例如，以一组雇员为例，我想创建一个选择框，每个雇员的部门都可以选择。
我试图找到关于这方面的教程之类的，但尽管我认为这并不是一个罕见的问题，我似乎找不到任何一个。下面是我当前的代码，虽然非常标准。
<select>
<option *ngFor="let employee of employees">
{{employee.Department}}
</option>
</select>
如果我以标准方式使用ngFor，我会得到一个用以下选项呈现的选择框：
浏览 20提问于2019-08-19得票数 0
回答已采纳
2回答
我用ngFor创建了这个动态列表。当我点击项目时，我想用新的动态列表来展开它，但只针对该项目。在我的以下代码中，它为第一个列表中的每一项进行开销。我理解为什么会发生这种情况，但我不知道如何解决它。
以下是我的代码
<ul *ngFor="let p of portList">
<li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png
浏览 2提问于2017-03-17得票数 1
1回答
我正在开发一个Ionic应用程序(v.4最终版本).
我的问题是:我有一个<ion-select>，这个选择有一个<ion-select-option>列表，这个选项是创建的*ngFor.问题是:当我更改数组时，删除一个元素，例如，离子选择选项不能重新呈现该数组的新状态。
<ion-select>
<ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>
(
浏览 0提问于2019-01-31得票数 0
1回答
您好，一项服务正在向我退回客户的可用卡，如下所示：
{
"cards": [
{
"id": "545451",
"name": "Visa",
"specialConditions": [
{
"type": "cardFees",
"contribution": [
浏览 9提问于2022-03-09得票数 0
6回答
我想要实现UI矩阵模式，它应该动态生成。通过接收输入参数，它应该决定什么是UI矩阵模式维度:例如9X3元素：
我使用Angular2.js，打字记录，SCSS。
和.ts看起来：
import {Component, Input, OnInit} from 'angular2/core';
import {NgFor} from 'angular2/common';
@Component({
selector : 'game-pattern',
moduleId : module.id,
templateUrl: '
浏览 13提问于2016-04-14得票数 7
这个问题已经有了答案，但与之无关。下面的代码是我的代码
<tr>
<th *ngFor="let col of header" *ngIf='col.name!="Parent"'>
{{col.value}}
</th>
</tr>
我使用ngFor创建标题，如果col.name具有特定的值，我想跳过
我们可以使用以下方法跳过，但是空头正在创建
<th *ngFor="let col of header" >
<
浏览 0提问于2018-10-29得票数 0
回答已采纳
5回答
我使用以下方法创建了一个角库：
创建应用程序=false my-workspaceng cd my-lib
图书馆在工作。但是，当我将模板修改为使用*ngFor时，如下所示：
模板：
<div *ngFor="let item of items">
my-lib works!
</div>
我收到一个错误：
属性ngFor上没有匹配的指令
到目前为止，我发现的各种建议都没有成功。如果您知道如何获得一个新的、配置为使用*ngFor之类的指令的干净库，我将非常感谢您的建议。我创建了包含角度8和9的库，结果是相同的。
亲切的问候
肖恩
浏览 4提问于2020-03-15得票数 4
2回答
我有下面的代码。
<div *ngFor="let item of items"></div>
这个渲染得很快。然后我做了这个：
getItems() {
return this.items;
}
<div *ngFor="let item of getItems()"></div>
这也是表演。然而，这一次：
getItems() {
return this.items.filter(item => item.premium === true);
}
<div *ngFor=
浏览 3提问于2019-11-29得票数 1
回答已采纳
2回答
我在创建基于角2 ngFor循环索引的动态类名时遇到了问题。我不得不使用以下语法，因为角2不喜欢相同元素上的ngFor和ngIf。
使用这个语法，我如何在{{index}}上创建一个索引值为索引的动态类名。我知道这不是正确的A2代码，但我将其放在代码示例中，以向您展示我希望该值出现在何处。
<div class="product-detail__variants">
<template ngFor #variant [ngForOf]="variants" #index="index">
<d
浏览 3提问于2016-01-13得票数 11
回答已采纳
3回答
如何在ngFor中将数组拆分为四项？
如何才能在这里显示4个项目而不是1个项目？
<div *ngFor="let item of items$ | async">
// How can I show here 4 projects instead of one?
{{item}}
</div>
浏览 19提问于2018-12-20得票数 1
回答已采纳
我试图学习如何在角中创建动态表单字段，我无法理解ngFor循环中索引值的工作逻辑，以及这个索引值如何帮助创建动态表单字段。
product-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-product-form',
template
浏览 0提问于2019-07-24得票数 1
回答已采纳
我有一个表单，它有固定字段，也有从数据库创建的动态字段。字段可能是不同的，每个time.So如何访问像这个类别对象那样以JSON格式生成的动态formControl值。
产出如下：
Category:[
{
"label": "test1",
"measurements": {
length:10,
Shoulder:20,
Chest: 20
}
},
{
"label": "test2",
"measur
浏览 0提问于2018-11-20得票数 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
回答已采纳
我正在学习，并且总是在与同样的问题作斗争。我想从我的json文件中加载一个列表。问题是json并不是这样的： [{ "id":"1"},{ "id":"2"}] 相反，我有更复杂的列表，比如： [{"data":[{"id":"1"},{"id":"2"}]}] 里面甚至还有更多的行。如果我像这样在angular中订阅： getCustomersList()
.subscribe(
data => {
th
浏览 22提问于2020-09-25得票数 1
回答已采纳
我想要过滤一个具有两个条件的列表，name和eventId，所以我创建了一个管道来过滤我的ngFor的结果。
...
<input matInput placeholder="Digite algo a ser apresentado..." [(ngModel)]="filteredString" />
...
我有我的ngFor
<div *ngFor="let element of dataSource?.data?.content | filter: filteredString ">
...
</div&
浏览 0提问于2022-04-07得票数 -1
回答已采纳
如何引用在ngFor循环中创建的dom中的元素。
例如，我有一个元素列表，我重复了这些元素：
var cookies: Cookie[] = [...];
<div *ngFor="#cookie of cookies" id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div>
<div *ngFor="#cookie of cookies" id="cookie-tab-con
浏览 4提问于2016-03-22得票数 31
回答已采纳
2回答
我正在接收一个名为products的JSON数组。我正在使用ngFor循环它。
*ngFor="let product of products"
每个产品都有一个数组，我正在循环如下所示
*ngFor="let item of product.Items"
我需要在product.items中设置一个等于ngOnInit的变量。就像这样：
this.items = product.Items
但是，我不知道如何正确地访问父数组(products)的子数组，并将子数组分配给ngOnInit中的一个变量。
浏览 7提问于2017-04-06得票数 0
回答已采纳
3回答
我试图使用ngFor循环从我的数组中获取数据。我明白了
“无法找到类型为”object“的不同的支持对象' Object‘。.NgFor只支持绑定到诸如数组之类的Iterable。”
我怎么才能修好它？
我如何获得数据
if (this.resources$) {
this.resources$.subscribe(result => {
if (result) {
this.resourcesList = <Resources[]>result;
this.showResources = true;
}
}
浏览 0提问于2019-06-07得票数 1
回答已采纳
2回答
<div *ngFor="let comment of comments | orderBy: '-'+orderBy">
<div class="comment-item" >
<div class="row">
<div class="col-md-8">
{{comment.userName}}
</div>
<div class="col-md-4">
浏览 0提问于2017-03-06得票数 1
我正在创建一个动态权限列表，如何使用以下“项”：
<div *ngFor="let item of PermissionsList.T1">
<!-- Some code here -->
</div>
在内部ngFor循环中。我尝试了以下和其他类似的变体：
<p *ngFor="let item2 of PermissionsList.{{item}}">test</p>
PermissionsList示例如下所示：
T1: Array [ "Business", "Rec
浏览 3提问于2020-09-17得票数 0
回答已采纳
1回答
我从后端收到这样的回复：
[{ id: 4, name: 'Andrew'},
{id: 3, name: 'Rebecca'},
{id: 2, name: 'Joseph'},
{id: 1, name: 'Kristin'}]
顺序是降序id。从最后一个到第一个。
我用这种方式定义了一个entityAdapter：
export const folderAdapter: EntityAdapter<Person> = createEntityAdapter<Person>({
select
浏览 5提问于2021-12-22得票数 0
1回答
非变异数组
、、、
我有一个服务，其中有一个cards数组，我用*ngFor="let card of this.cardService.cards在list-cards.html组件模板中遍历了这个数组。这个cards数组有一个通过API调用创建的对象列表，它在应用程序初始化时呈现为主页。
如何以非变异方式从card.service.ts中过滤cards数组？
现在，它是这样的(变异的方式)：
card.service.ts文件：
this.cards = this.cards.filter((e: any) => e.id !== id);
如果我创建了一个新的数组变量，以便以非变异的方式对其进
浏览 0提问于2020-06-16得票数 0
1回答
我正在尝试使用ngFor填充分组结果。
<div *ngFor="let item of states; let i = index">
<ul>
<li ngFor="let state of item">{{item}}</li>
</ul>
</div>
如果我填充项目，我就会得到这个
分块结果被转换为字符串
如果我尝试
浏览 7提问于2017-04-23得票数 2
回答已采纳
我试图将我的父索引传递给嵌套的ngFor，这样我就可以访问一个数组："name1，name2等“
<ion-item *ngFor="let b of banca ; let i = index">
<ion-select>
<ion-select-option *ngFor="let n of name + [i+1]" [value]="n">{{n}}</ion-select-option>
</ion-select>
</ion-item&
浏览 3提问于2022-04-21得票数 1
回答已采纳
1回答
下面是我的代码，我想放在一个for循环中，并基于我的项目计数，我想创建旋转木马项目。
这可以通过使用ngFor在angular中轻松实现，但我不知道如何在react中实现。
<code>A0</code>
浏览 9提问于2019-12-06得票数 2
回答已采纳
如何使用索引进行计算？当条件为真时，我想应用类危险，但我需要在*ngFor循环中计算i-1。
<tr *ngFor="#org of data; #i = index">
<td [ngClass]="{danger: org.price < data.stock[i-1].val }">
</tr>
浏览 0提问于2016-05-21得票数 1
回答已采纳
3回答
我的服务类上有一个属性，如下所示：
articles: Observable<Article[]>;
它使用标准的getArticles()解决方案由http.get().map() ()函数填充。
如何手动将一篇新文章推入到这个数组中；该数组尚未持久化，因此不属于http？。
我的场景是，您创建一篇新文章，在保存它之前，我希望Article[]数组将这个新的条目推送到它，以便它出现在我的文章列表中。
此外，该服务在两个组件之间共享，如果组件A使用ng ngFor OnInit()使用服务并将结果绑定到重复区段*ngFor，则将从组件B更新服务数组，同时更新组件A的节中的结果？还是
浏览 4提问于2017-11-22得票数 18
回答已采纳
1回答
考虑下面的示例，其中有一个MenuButtons数组，然后使用*ngFor动态构建菜单：
buttonsDisabled: boolean = (this.someOtherService.someArray.length > 0) ? false : true;
export interface MenuButton {
text: string;
iconName?: string;
disabled?: boolean;
}
quickAccess: MenuButton[] = [
{
text: "Undo",
i
浏览 5提问于2022-08-27得票数 0
1回答
我有一个组件，它使用*ngFor在表单上创建输入标记。它基本上看了一组玩家，并为每个玩家创建了18个输入标签。最后，我有一个提交按钮。该按钮启动一个方法，该方法应该遍历每个生成的输入标记，收集它们的值，并将它们添加到分数数组中。但是，当我尝试收集这些值时，会发现一个错误，即这些值为null。如何从输入标签中提取每个值？这有可能吗？以下是代码：
HTML ( ids的最后一个数一直递增到id="id{{player.index}}-18")
...<mat-tab-group class="tabs">
<mat-tab labe
浏览 2提问于2019-11-23得票数 0
回答已采纳
1回答
我正在尝试创建一个表，当您单击一个按钮时，它需要直接显示它下面的行。
我看过的帖子，但没有找到答案。
当我像下面这样使用它时，它可以工作，但问题是，它显示了所有其他隐藏行，因为它们都共享相同的collapse variable。
这是一个工作示例，但不是100%正确：
<table>
<thead>
<th>Path out of this queue</th>
<th *ngFor="let role of roles">{{role.RoleName}}</th>>
</thead&
浏览 0提问于2019-03-13得票数 1
回答已采纳
1回答
如何以8角显示阵列内的数组值？
、、、、
我对角度很陌生，并试图在表中的数组值中显示数组。
这是我的json数组，想要在行中显示它
{
"data": {
"Influencer": [
{
"clickDetails": [
[
{
"clk_counter": "1",
"social_type": "14"
}
],
浏览 2提问于2020-12-08得票数 0
回答已采纳
3回答
我想要创建一个20行的表。
我正在从后端获得一些数据，比如3行。对于接下来的17行，每一行的单元格应为空。
使用下面的代码只会给我按数据显示的行数，即数字为3
<table>
<tr *ngFor="let group of groups">
<td><h1>{{group.name}}</h1></td>
</tr>
</table>
我想试试下面这样的方法，但语法方面的问题不起作用。
<table>
<tr *ngFor
浏览 4提问于2020-07-01得票数 1
我通过*ngFor指令(而不是ComponentFactory)创建一个子元素列表，如下所示： <ul class="nav navbar-nav">
<top-menu #topmenu *ngFor="let menu of menus" (onDeleteMe)="handleDeleteMenu($event)">
</top-menu>
</ul> 现在，我希望handleDeleteMenu从DOM中删除该组件。这是可能的吗？或者我应该更改模板以使用组件工厂创建组件？
浏览 34提问于2017-08-22得票数 2
回答已采纳
2回答
下面的场景在javascript中会很简单，但我在Angular中遇到了一些问题。
我得到了一个类似这样的数组：
array a = ( "id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3)
使用ngFor，我现在尝试在这里创建一个网格，其中的所有元素在本专栏中以列和块的形式进行分隔。因此，我当前的代码(工作正常，但很糟糕)。
<div *ngFor="let a of a">
<template [ngIf]="a.column=='1&
浏览 0提问于2017-04-24得票数 6
回答已采纳
我经常在*ngFor中使用.slice().reverse()来以相反的顺序显示元素。但是现在我遇到了一个问题，因为我也使用了keyvalue。如何在.slice().reverse()中使用keyvalue？
<div *ngFor="let order of orderData.order.slice().reverse() | keyvalue ">
Sum: {{order.value.sum}}
</div>
此解决方案有效，但我得到了一个错误：
浏览 12提问于2020-11-30得票数 0
回答已采纳
我有一个下拉列表，我正在使用Angule5创建DOM结构，如下所示
<div *ngFor="let dropdownof ListOfDropdown" class="md-form form-lg">
<select name="function">
<option *ngFor="let option of optionList" value={{option .id}} required>{{option .value}}</option>
</select&
浏览 0提问于2018-06-27得票数 0
您好，我一直在尝试使用ngIF和ngFor过滤数组，并取得了一些成功。
<button *ngFor="let item of items"> <div *ngIf="(item.data.type == 1)"> {{item.data.name}} </div> </button>
这段代码只为有type=1的数据显示有名称的按钮，但它也为每个没有type=1的数据条目创建了空按钮，我不知道如何摆脱空按钮。任何帮助都是非常感谢的。
浏览 0提问于2017-03-21得票数 26
回答已采纳
我正在研究如何为select在formArrayName中设置一个绑定对象复合绑定。我猜想formControlName应该引用数组中的当前项，但我不知道如何访问它。
<div formArrayName="users">
<div *ngFor="let u of users.controls; let i=index" [formGroupName]='i'>
user {{i}}: <select formControlName='id'[compareWith]="
浏览 0提问于2019-02-08得票数 3
回答已采纳
2回答
我已经创建了一个list组件，它通过一个条目数组成功地运行，并通过一个*ngFor循环输出其数据。
现在，我想重用这个组件，并添加更多可能的数据数组供选择。为此，创建了一个@input，允许我在组件使用的任何地方传递数组名称"on“，但是当我试图将它传递给*ngFor时，我会得到一个错误。
我的ts代码是：
@Input() listName : string;
list1: any = [
{title: 'title1'},
{title: 'title2'},
{title: 'title3'},
]
list2: any =
浏览 1提问于2019-06-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
