根据索引将元素添加到ngfor dom
根据索引将元素添加到ngFor DOM是一个在Angular前端开发中常见的需求。ngFor是Angular框架中的一个结构性指令，用于在模板中循环渲染一组元素。
当我们需要根据索引来添加元素到ngFor循环渲染的DOM中时，可以通过在数据源数组中插入元素来实现。具体步骤如下：
- 首先，在组件的类中定义一个数组作为数据源，例如：
items: any[] = ['item1', 'item2', 'item3'];- 在模板中使用ngFor指令循环渲染元素，同时使用索引变量来追踪每个元素的位置，例如：
<div *ngFor="let item of items; let i = index">{{item}}</div>- 在组件类中定义一个方法，用于在指定索引位置插入新元素。例如，以下方法在索引2处插入新元素：
addItem(index: number) {
this.items.splice(index, 0, 'newItem');
}- 在模板中调用该方法，并传入要插入的索引位置，例如：
<button (click)="addItem(2)">Add Item</button>通过以上步骤，当点击"Add Item"按钮时，会在索引2处插入一个新的元素到ngFor循环渲染的DOM中。
优势：
- 灵活性：根据索引添加元素可以动态改变ngFor渲染的DOM结构，提供了更多个性化的交互方式。
- 扩展性：可以根据具体需求，在指定位置插入任意类型的元素，满足不同的功能需求。
应用场景：
- 动态表单：根据用户操作动态添加表单元素。
- 排序功能：在列表中插入元素，调整顺序。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种计算场景的需求。产品介绍链接
- 腾讯云云数据库 MySQL：高性能、可扩展的关系型数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：安全可靠、高扩展性的云端对象存储服务。产品介绍链接
注意：以上推荐的腾讯云产品仅作为示例，并非对其他品牌商的否定或推荐。
相关·内容
我在第一个组件中嵌套了组件 <div class="single-proposal-wrapper" (mouseover)="showCheckBox(request.id)" (mouseout)="hideCheckBox(request.id)">
<div [id]="request.id" class="proposal-checkbox" (click)="toggleRequestState($event)"></div>
<ap
浏览 33提问于2019-12-17得票数 0
我使用的是角4，我有一个包含<box>组件列表的组件。我需要使用户能够选择，选择父组件中的多个框。
在中，我使用mousedown, mouseover and mouseup处理鼠标事件。对于每个鼠标事件，a box component emits its id to the parent component。用户可以通过单击某个框来选择多个框，并将鼠标拖动到其他框中。
box.component.ts
import { Component, OnInit } from '@angular/core';
import { EventEmitter, Input,
浏览 6提问于2017-09-19得票数 1
这是我的模板：
<div *ngFor="let d of data; let i=index">
<select [(ngModel)]="d.dob" name="dob-{{i}}">
<option *ngFor="let d of [1990, 1991, 1992]">
{{d}}
</option>
</select>
<i cla
浏览 1提问于2017-10-06得票数 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
回答已采纳
我在任何地方都找不到关于这些差异的很好的描述。*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
回答已采纳
我想做这样的事情：
<div *ngFor="let parent of parents">
<div *ngFor="let child of parent.children">
</div>
</div>
但我不想要额外的外部div。从我所能找到的搜索结果来看，在Angular 1中，我可以这样做：
<template *ngFor="let parent of parents">
<div *ngFor="let child of parent
浏览 2提问于2016-09-03得票数 13
回答已采纳
1回答
我有一张用棱角材料制作的桌子，如下所示：
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let item of displayedColumns; let i = index" cdkColumnDef="{{getColumnName(i)|Formater:'clean'}}">
<mat-header-cell *cdkHeaderCellDef mat-sort-header cla
浏览 7提问于2017-10-16得票数 1
回答已采纳
我有一系列从ngFor循环创建的mat-expansion-panels。 <mat-expansion-panel *ngFor="let num of countArray" [attr.id]="num + 'exp'" #expPanels>
<mat-expansion-panel-header>
<mat-panel-title>
{{num}}
</mat-panel-title>
</mat-expans
浏览 17提问于2020-06-24得票数 0
回答已采纳
我有一个<p>，它包含用*ngIf生成的文本(来自后端的数据)。我想根据文本长度更改文本大小.我试图在<p>的帮助下导入@ViewChild来操作元素，但它给了我undefined。
如有任何建议，将不胜感激。
Html
<section class="movies-container">
<div class="movies-container__box" *ngFor="let m of movies">
<img class="movie
浏览 0提问于2018-09-16得票数 1
我有一个数组，并使用它的ngFor创建一些html元素。我的问题是在添加新成员后添加新成员到我的数组和更新html部分。
html部分：
<div *ngFor="let member of members">
<span>{{member}}</span>
</div>
ts部分：
let members: string[] = ['a','b','c','d'];
在呈现html部分之后，在应用程序中的某个位置，我向数组中添加了e元素，但我的html部分不会更
浏览 0提问于2019-08-07得票数 2
回答已采纳
嗨，我有一个简单的角度组件的问题，我使用一个反应形式插入文本，然后我通过ngFor循环结果
模板
<form [formGroup]="colorsForm">
<div>
<label for="colorName">Color Name</label>
<input id="colorName" type="text" class="form-control"
formControlName="colorNa
浏览 3提问于2020-05-09得票数 1
回答已采纳
1回答
今天，我尝试了角指令ngFor。我面临的问题是，当我选择任何复选框(例如0)并单击" next“时，如果下一个问题也有我在上一个问题中所选择的选项(0)，那么它将被自动选中，我不知道如何？如果任何两个或多个连续的问题都没有相同的选择，则不会看到这种行为。。我希望这是合理的。这是我的
模板：
{{question}}
<div *ngFor="let option of options">
<input type="checkbox">{{option}}<br>
</div&g
浏览 3提问于2017-10-02得票数 1
回答已采纳
我在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
回答已采纳
我需要切换模板。我有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
我是Angular2的新手。当iam绑定属性时，我通常以如下方式进行。
Example1：
<input type="number" [max]="variableName">
Example2：
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of itemList" [value]="item.value" [selected]="selectedItem==item.value"&g
浏览 5提问于2017-03-23得票数 3
回答已采纳
我有一个角度组件，在其中我使用ngFor动态地创建div，我还想在创建div之前检查一个条件，但是我不能在div中使用ngFor和ngIf。
我的代码：
<div class="row">
<div class="col-3" *ngFor="let row of equips"
style="padding-top: 7pt; padding-left: 10px; width : 100%">
...
</div>
</div>
我希望
浏览 8提问于2020-07-30得票数 0
回答已采纳
1回答
嵌套*ngFor*与*ngIf
、、、、
问题
在下面的代码中，我试图将所有的Projects (对象)显示在Tab下面，这些对象是根据它们的类别进行的。
类别必须是相等的。
编辑:如果不清楚，请看一下。
这是我的密码：
<md-tab-group>
<md-tab *ngFor="let tab of tabs">
<template md-tab-label>
{{tab.name}}
</template>
<h1 *ngFor="let project of proj
浏览 4提问于2017-01-09得票数 4
回答已采纳
我正在创建一个网站构建器，需要动态地呈现html元素，其中标记和内容是从数组中提供的。有可能用*ngFor吗？
@Component({
selector: 'app-root',
template: `
<ng-container *ngFor="let element of elements">
<{{element.tag}}>
{{ element.text }}
</{{element.tag}}>
</ng-container>
`
}
浏览 4提问于2022-01-07得票数 0
1回答
当创建多个图表并且只有一个需要自定义时，编辑角度堆栈时会遇到麻烦。
下面的代码创建一个堆叠了所有绘图的图表，然后在虚拟滚动中为堆叠在页面右侧的每个绘图创建一个单独的图表。我正在尝试编辑ngIf，以便仅在图表id =rawTraceHighChart0(最上面的图表)时运行我的subtitle函数，如果它是单例数据集，则使用i进行设置。
我一整天都在尝试不同的方法，到处都找不到，所以我请求任何帮助。我试着用一个新的#字幕模板给ngIf添加一个id条件，试着手动设置它，然后上下搜索寻找答案。#singlechart模板工作得很好，我的subtitle函数并没有引起问题，但是我找不到一个惟一的标识符
浏览 22提问于2018-03-05得票数 0
回答已采纳
我试图学习如何在角中创建动态表单字段，我无法理解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
回答已采纳
当我回答另一个问题时，我看到了一本书的截图，书中说*ngFor (语法糖版本)是由两种结构指令组成的。
这是书中所示的代码：
<ul>
<li *ngFor="let book of books">
{{book.title}}
</li>
</ul>
因此，当声明“结构指令很容易识别，在指令属性名称(*)前面有星号(*).”时，要么是错误的。否则这本书就错了。因为我只看到一个星号。
所以我开始挖掘棱角的ngFor文档。我找到了
从这个截图来看，这本书的作者似乎是对的，[ngFor]和[n
浏览 2提问于2021-01-17得票数 2
我有一个项目的ngFor列表。每一项都有一个swipeleft/swiperight指令，该指令显示一个删除按钮。(考虑iOS消息交互)。然而，当我转到swipeup时，就好像在列表中滚动一样，我在android操作系统上看不到任何滚动。它可以识别事件，因为我可以添加一个debug，并且当swipeup被触发时，我会得到一个响应，但是，它实际上并不会滚动列表。在iOS上，我没有问题。
这是我找到的一些代码，希望能让它工作，但在android上没有运气。
export class MyHammerConfig extends HammerGestureConfig {
override
浏览 0提问于2016-11-16得票数 0
<div>
<input type="text"/>
<span class="drop-down-icon"></span>
</div>
<ul *ngIf="something">
<li *ngFor="let item of list"></li>
</ul>
在上面的代码中，div元素及其子元素是从指令中添加的，但我希望从组件中添加ul元素，这可以实现吗？
浏览 0提问于2020-02-18得票数 0
1回答
我想渲染基于索引的DIV元素，我不想让DIV渲染“项目”的所有ngfor。在基于索引的DIV中也可以有动态内容吗？感谢你的帮助。谢谢。 <ul>
<li *ngFor="let item of items; let i =index">
<i (click)="add(i)">
<div *ngIf="i">
</div>
</li>
</ul>
浏览 12提问于2020-05-01得票数 0
我比较新的角度，所以请原谅我的可能是微不足道的问题。
我也搜索了很多，发现了很多类似的问题，但是没有一个真正解决我的问题。
情况
让我们假设以下组件的模板：
<div class="wrapper">
<!-- Stuff -->
.
.
.
<div *ngFor="let group of groups">
<button #btn (click)="onClick(btn, group)">Change group title</b
浏览 1提问于2018-06-01得票数 0
我正在尝试运行一个脚本，它会将类添加到两个div中，这将导致手风琴效果。
我使用JSON文件加载数据，并使用NgFor构建divs。问题是，当尝试使用GetElementbyClassName()时，DOM返回“Null”。
如果我删除NgFor并使用静态文本，这个解决方案就可以很好地工作。一旦我打开NgFor，我总是得到Null。这都是在ngAfterViewInit()内部运行的，所以我不明白为什么它找不到第一个div.accordion。
我没有很强的编程背景，所以如果你能清楚地解释我需要做些什么来解决这个问题，我将不胜感激
HTML
<!--EVENTS-->
&
浏览 2提问于2016-12-19得票数 0
我想知道，Angular团队是否计划为ngfor添加一个数字或变量？这对于开发来说将是非常舒适的。
目前，我们必须创建一个伪表
fakeArray = new Array(12);，然后是<li *ngFor="let a of fakeArray"></li>
感谢你的社区。
浏览 7提问于2018-01-16得票数 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
回答已采纳
1回答
引导工具提示在悬停时切换宽度
、、、、
我的网页应用程序有一个特殊的问题。我正在查看我的应用程序中包含数据的矩阵。当我在这个矩阵中的数据上悬停时，它将显示有关对象的一些基本信息。无论如何:每次我用光标在它上方盘旋时，它都会从右到左改变宽度。
我的HTML：
<table class="table table-bordered" style="margin-top: 22px">
<colgroup *ngFor="let y of yArray">
<col style="width: 5%" *n
浏览 1提问于2020-02-25得票数 0
回答已采纳
2回答
我正在构建一个通用表控件，我希望它能够跨许多不同的表单使用。然而，一些不同的行将需要不同的模板。模板标签是我不太明白的东西。
我想要完成的是，如果它不是日历，那么做一件事，如果它是做另一件事。
我的尝试：
<tr *ngFor="let row of rows">
<td *ngIf="canEditRecord">
<a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
<
浏览 6提问于2017-01-02得票数 1
回答已采纳
5回答
对于ngSwitch指令，我有点困惑--无论是‘属性指令’还是‘结构指令’。
属性指令使用“方括号”编写，如ngStyle、ngClass等(我们将其写为ngSwitch，将其称为“属性指令”)。
结构指令是用'aestrick‘编写的，例如*ngFor，*ngIf，等等(我们将这些情况写为*ngSwitchCase=“.”)这意味着这是一个结构性指令)。
<div [ngSwitch]="colorValue">
<p *ngSwitchCase="red">Red</p>
<p *ngSwit
浏览 3提问于2018-11-05得票数 3
回答已采纳
当我为ngFor和trackBy读取doc (trackBy)时，我以为只有更改了trackBy函数返回的值时才会重做DOM，但是当我在这里使用它()时，我发现实际上根本不理解它。下面是我代码的基本部分：
export class AppComponent {
data = [
{ id: 1, text: 'one' },
{ id: 2, text: 'two' },
{ id: 3, text: 'three' },
];
toUpper() {
this.data.map(d => d.
浏览 0提问于2019-06-19得票数 9
1回答
我使用ngForOf列出日期，每个日期都由id属性表示，该属性实际上是它的索引+ 1。所有日期都以数组中的对象形式存在。另外，每个日期都是一个组件实例。
ngForOf的特点是，每当我从列表中删除日期时，整个DOM刷新和ID都会被重新分配。
<app-date *ngFor="let date of dates | callback: filterDates; index as i" (delete)="del(i)"></app-date>
问题
现在，当我说“删除”时，我不是从数组中剪切/删除日期，而是将日期的action属性设置为&
浏览 2提问于2020-08-11得票数 0
回答已采纳
这不是复制品。我已经做了研究。如果你仍然觉得这不是一个好问题，在评论中写下答案，我会删除这个问题。我想要做的是将index的值从HTML元素传递给组件。
<ul *ngFor="let person of persons; let i= index" [index]="i">
//上面^视图的组件
class appComponent{
@Input() index; // this should get the value of index; but it gives undefined
}
浏览 1提问于2017-10-17得票数 3
在trackBy中使用“ngFor : index”是一个很好的实践吗？
例如：
<li *ngFor="let error of fileErrors.value; trackBy : index;"> {{error}} </li>
为了提高性能，每次使用trackBy都是必需的*ngFor，或者我们可以忽略它。
如果我们忽略了，那么迭代器实现在默认情况下将使用什么？
浏览 1提问于2018-12-19得票数 5
回答已采纳
我有这个挑战，我不知道如何实现一个函数，以获得点击事件的方块。我想得到每一个按钮的点击事件与平方类。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-area',
template: `
<div id="statusArea" className="status">Next player: <span>X</span></div>
<div
浏览 5提问于2022-08-02得票数 0
我正在努力通过*ngFor使Material组件与动态添加的元素一起工作。我知道我需要打电话给componentHandler.upgradeElement，但是我把这个电话放在哪里呢？我正在尝试和指令，但它们似乎不起作用。具体来说，我需要mdl-菜单上的每一个项目的数组。对看哪有什么建议吗？
浏览 1提问于2016-03-28得票数 7
回答已采纳
以下示例中ngFor前的*是什么意思，为什么需要它？
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
浏览 45提问于2016-02-19得票数 35
回答已采纳
我有一组是对象的项目。这些项目是从服务中调用的，并在购物车页面上显示。
单击“删除”按钮时，将运行delete this.cart.items[i];。this.cart是我的服务，并从对象中删除该项。它在页面上也成功地做到了这一点，但是我在控制台中得到了一个空白元素和错误，名为Cannot read property 'qty' of undefined。我假设ngfor会自动更新DOM并删除元素，因为该对象不再存在。我还需要手动删除DOM中的元素吗？
从下面的数组中，我希望完全删除第一项，但仍然显示第二项。
[
{
"desc": "De
浏览 4提问于2020-08-23得票数 0
回答已采纳
我有一个动态创建表单的页面，如下所示：
空格是输入，整行是一个按钮。是否有一种方法可以单击按钮，即整行，并选择/聚焦于对应的输入？要记住，输入的数量是由用户决定的，页面上最多可以有300行。
home.ts
export class HomePage {
public homeForm: FormGroup;
constructor(
public navCtrl: NavController,
public userData: UserDataProvider,
private formBuilder:
浏览 0提问于2018-02-18得票数 4
回答已采纳
1回答
Hi all，我有带有索引的嵌套ngFor (参见下面的代码).
<div *ngFor="let category of categoriesWithFoodies; let catIndex = index">
<span>{{catIndex}}</span>
<ul class="foodies-list">
<li *ngFor="let foodie of category.foodies; let foodIndex = index">
<sp
浏览 3提问于2017-08-21得票数 0
2回答
我正在编写代码，以便使用div指令动态创建*ngFor元素，如下所示：
<div *ngFor = "let item of Items">
<p>Item : {{item}} </p>
</div>
现在，当我将鼠标悬停在特定的div部件上时，这个div部分只需要使用一些背景色就可以很高。
如果我在mouseenter标记上使用div属性，它将选择所有的div元素，而不是选择与鼠标悬停的确切元素。
<div (mouseenter) ="hovered=true"
(mouseleave
浏览 1提问于2020-02-28得票数 1
回答已采纳
我创建了一个"tessellate“指令，允许您包装一些div。
<tessellate columns="4">
<div class="thumbnail" ng-repeat="item in items track by item.id">
{{item.Name}}<br />
{{item.Summary}}
</div>
</tessellate>
它每次使用一个div，并将其附加到指定列数中最短的列中，以创建一个镶嵌/镶嵌效果。
参
浏览 1提问于2014-04-09得票数 2
回答已采纳
我使用@HostListener来管理我的事件，而不是(contextmenu)="myFunction(myFile)"
但我不知道如何在*ngFor循环中传递对象：
file.component.html：
<div *ngFor="let file of fileList" >
<div [attr.myFile]="file">{{ file.name }}</div>
</div>
file.component.ts：
@Input() fileList: MyFileList[] =
浏览 4提问于2022-04-16得票数 0
1回答
订阅后可观察到的角功
、、、
我从API中获取json数据，它包含设备的详细信息。
我在ngOnInit()开头显示它。然后我在页面上有一个按钮
<ion-button expand="block" *ngIf="device$ | async as device" (click)="makeAction(device)">{{decideActionText(device)}}</ion-button>
得到设备后，我想用按钮更改设备的状态。
响应应该添加到页面中，相反，我正在得到未定义的
我怎样才能在不同的地方使用相同的可观察到的？如何妥善处
浏览 0提问于2019-05-10得票数 0
2回答
更改检测在我的组件中运行得太频繁有问题，所以我尝试将trackBy选项用于ngFor指令。
通过阅读，我了解到角将使用从您的trackyBy函数返回的值，以便在下次运行更改检测时使用它的diff。为了看它是否符合我的需要，为了更好地理解它，我建立了一个游乐场。在使用它时，我设置了用于返回未定义的trackyBy函数的返回值，并且仍然得到了我想要的结果。
TS:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styleUrls: ['./ap
浏览 3提问于2020-03-27得票数 1
回答已采纳
这是工作直到角4.3.2+ -不知道为什么Md-选择是没有显示。{{ selected }}吐出了category，我确信这一点。
<md-select formControlName="category" name="category"
placeholder="Categories" *ngIf="selected === 'category'">
<md-option *ngFor="let cat of categories" [value]=
浏览 1提问于2017-09-01得票数 1
回答已采纳
1回答
我有角2和触摸设备的问题。特别是，当组件通过NgFor呈现并(触摸)拖动到屏幕上时。如果NgFor的重呈现发生在触摸拖动过程中(由于外部事件更新绑定到NgFor的数据，这在我的应用程序中很常见)，就会出现这个问题。touchmove events停止触发，并要求您举起手指再次将其放回原处，这是一种糟糕的移动体验。如果使用鼠标，则不会发生此问题。
本质上，在我的应用程序中，我监听组件上的touchstart事件，通过一个条件*ngIf="isDragging" (它不在NgFor内)显示另一个'DragComponent‘，它是根据touchmove事件位置数据在屏幕上
浏览 2提问于2016-08-05得票数 1
回答已采纳
根据角度文件，角指令有三种类型：
组件
构造性
属性
根据以下官方链接：
1.组件
<home></home>
<about-us></about-us>
<support></support>
2.结构指示
<div *ngIf="age < 18"> ... </div>
<div *ngFor="let x of students"> ... </div>
3.属性指令
<div [ngClass]=
浏览 0提问于2018-07-19得票数 3
回答已采纳
我使用click事件和一些普通的javascript完成了这项工作，但我相信有更好的方法来完成这项工作。
我正在使用ngFor生成一些动态行和相应的动态按钮。
它们看起来像这样：
<div *ngFor="let section of data.order?.sections" id="{{section.class}}Detail" class="{{section.name | lowercase | removeAmpersand | removeSpaces }}">Random Text Here</div>
然
浏览 1提问于2016-07-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
