如何在嵌套ngFor (Angular)中发送数组的索引
在Angular中，ngFor指令用于循环遍历数组或对象，并生成相应的HTML元素。当需要在嵌套的ngFor中发送数组的索引时，可以使用内置的index变量。
下面是一个示例，展示如何在嵌套的ngFor中发送数组的索引：
<div *ngFor="let outerItem of outerArray; let outerIndex = index">
<div *ngFor="let innerItem of outerItem.innerArray; let innerIndex = index">
Index: {{ outerIndex }} - {{ innerIndex }}
</div>
</div>在上述示例中，我们有一个外部数组outerArray，它包含多个对象。每个对象都有一个内部数组innerArray。通过使用ngFor指令，我们可以遍历outerArray和innerArray，并使用index变量获取索引值。
在内部的ngFor中，我们使用let innerIndex = index来获取内部数组的索引。同样地，在外部的ngFor中，我们使用let outerIndex = index来获取外部数组的索引。然后，我们可以在模板中使用这些索引值进行展示或其他操作。
这种方法适用于任意嵌套层级的ngFor循环。通过使用不同的变量名，我们可以在每个嵌套层级中获取相应的索引值。
希望这个答案对你有帮助！如果你对其他问题有疑问，请随时提问。
相关·内容
3回答
我需要在for中分配两个变量。在Angular 5+中类似这样的内容
<div *ngFor="let a of apple, let b of ball">
<a [routerLink]="['/ball',b]">
{{a}}
</a>
</div>
有什么建议吗？
提前感谢您的帮助。
浏览 0提问于2018-10-04得票数 5
在我的angular 4项目中，为了响应来自服务器的请求，我得到了两个不同的数组，在模板中，我想同时使用这两个数组。控制器代码为：
this.contractService.getOwnerContract()
.subscribe(
res => {
this.contracts = res.contracts;
this.users= res.users;
})
在html中，我想使用两个ngFor来使用约定和用户属性：
<div class="col-md-12 property-list-box" *ngFor="
浏览 55提问于2018-07-14得票数 2
回答已采纳
我是Angular的新手，我只是想知道是否可以在不使用let项的情况下使用ngFor指令；让i= index语法 在使用ngFor迭代数组时，有没有其他方法可以获得索引 我的示例应用程序 <div *ngFor="let oddNumber of oddNumbers; let i = index">
<app-odd *ngIf="oddNumbers[i]" [number]="oddNumbers[i]"></app-odd>
<app-even *ngIf="evenNumb
浏览 34提问于2020-08-29得票数 0
1回答
如何以8角显示阵列内的数组值？
、、、、
我对角度很陌生，并试图在表中的数组值中显示数组。
这是我的json数组，想要在行中显示它
{
"data": {
"Influencer": [
{
"clickDetails": [
[
{
"clk_counter": "1",
"social_type": "14"
}
],
浏览 2提问于2020-12-08得票数 0
回答已采纳
给定以下Angular应用程序，SVG title将显示为第一个HelloComponent的rect的工具提示(悬停时)，而不是其他的。如果您删除(mousemove)属性，则会显示所有工具提示。这里发生了什么?如何修复？ https://stackblitz.com/edit/angular-ivy-df8cxp?file=src/app/app.component.ts import { Component, Input } from "@angular/core";
@Component({
selector: "hello",
templa
浏览 24提问于2020-09-08得票数 0
回答已采纳
我正在尝试为一组相同的输入使用*ngFor，但输入应该绑定到的属性除外。 <mat-form-field *ngFor="let prop of [ID, Name, Nickname]">
<input matInput type="text" placeholder="prop.key" #propInput [(ngModel)]="prop">
<button mat-icon-button matSuffix mat-icon-button *ngIf="propI
浏览 25提问于2019-09-27得票数 1
回答已采纳
1回答
在我的项目中，在summary.component.ts中有两个数组，一个依赖于另一个：
state: State[]
city: City[]
selection: number[] = number
其中类state.ts
id: number
name: string
和city.ts类
id: number
name: string
score: number
state: State
在DB中，我遇到了以下情况：
STATE
--------------
id | name |
--------------
1 | USA |
--------------
2
浏览 2提问于2021-03-19得票数 0
回答已采纳
我检查了许多Stackblitz示例的formArray验证，并根据另一个formControl值禁用了formControl，并尝试了相同的方法，但在我的表单中，它并没有应用相同的东西。 qty formControl上的验证不起作用，如果用户从选择中选择了活动的值，则应启用fromControl qty，否则在默认情况下应禁用它，这也无法正常工作。 我错过了什么？ 这是我的Stackblitz演示。 参考，我已经用来验证。https://stackblitz.com/edit/angular-validate-dynamic-formarray-formbuilder-pru78n?fi
浏览 12提问于2020-10-20得票数 0
回答已采纳
3回答
我试图迭代一个数组数组中的对象，但是，我无法在前端显示数据。 我尝试过这种方法： <div *ngFor="let item of events of event | keyvalue">
{{item.key}}:{{item.value}}
</div> 还有这一条： <div *ngFor="let item of events of event | json">
Test: {{item}}
</div> JSON数据的结构以这种格式给出。 [
[
{
浏览 20提问于2021-09-22得票数 0
回答已采纳
我试图让我的子组件读取父母HTML的ngfor值来显示子页面。但是子组件似乎没有从父页面获得索引号。
这是我的父母: app.component.html：
<ul *ngFor="let item of formDoc.components | keyvalue: valueAscOrder; let i = index ">
<li *ngIf="item.value['type'] == 'columns'">
<mat-card
浏览 0提问于2019-10-16得票数 0
回答已采纳
2回答
假设你有一个任务列表，它又有一个子任务列表，并且你希望子任务是可以改变的--为什么这个角度不能正确地双向绑定子任务的数据？
<div *ngFor="let task of tasks">
Task value: <input [(ngModel)]="task.value">
<br>
<div *ngFor="let subtask of task.subtasks">
Subtask: <input [(ngModel)]="subtask">
浏览 1提问于2019-01-12得票数 1
回答已采纳
我正在完成我的目录，其中一件事一直困扰着我，那就是，用ngFor创建的卡片是不正常的。我刚开始使用角度，我需要一些帮助。
演示-
HTML
<div class="container">
<div class="row">
<div class="col-md-4 ml-2 mt-2"
*ngFor="let pokemon of pokemons" >
<div class="card-container">
<div
浏览 1提问于2022-09-08得票数 1
我得到以下错误
错误:模板解析错误:不能绑定到'ngforOf‘，因为它不是一个已知的’离子-项目‘属性。1.如果“离子项”是一个角度分量，并且它有“ngforOf”输入，则验证它是该模块的一部分。2.如果“离子-项目”是网络组件，则在该组件的“CUSTOM_ELEMENTS_SCHEMA”中添加“@NgModule.schemas”以抑制此消息。3.若要允许任何属性添加“NO_ERRORS_SCHEMA”到此组件的“@NgModule.schemas”，请执行以下操作。(...
有关以下模板代码
<ion-card *ngFor="let i of routineL
浏览 5提问于2017-10-15得票数 0
回答已采纳
2回答
我试图为两个级别的json数据实现相同的管道，在两个嵌套的ngFor循环中用html进行解析。
home.component.html：
<div class="drop-type">
<div class="label">Multi-select two levels</div>
<div class="search-input-box">
<input [(ngModel)]="searchValue" class="search-input" pla
浏览 0提问于2018-02-27得票数 1
回答已采纳
2回答
我有一个带有侧边菜单的Ionic3应用程序。我需要创建一个带有子菜单的菜单，但在这个子菜单中，我有另一个级别的列表(子菜单进入子菜单)。我有这样的例子，但只有一个级别的子菜单：
app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar class="menu-header">
<ion-title>Menu</ion-title>
</ion-toolbar></ion-header&g
浏览 4提问于2018-06-27得票数 1
1回答
使用ngFor遍历二维数组
、、、、
在这件事上，我已经把头撞在墙上有一段时间了，但我终于感觉很接近了。我要做的是读取我的测试数据，并将其内容打印到html中的一个表中，但我不知道如何使用ngfor循环访问该数据集。
这是我的typescript文件
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'fetchdata',
template: require('./fetchdata.componen
浏览 11提问于2017-07-08得票数 3
回答已采纳
2回答
我正在使用angular2 -datatable。
我无法在相应的行中显示正确的行号。
当用户使用分页器移动到下一页时，datatable将再次从一个开始计数。
我的html代码：
<tbody>
<tr *ngFor="let item of mf.data; let i =index">
<td>
{{i+1}}
</td>
浏览 0提问于2017-05-11得票数 0
回答已采纳
5回答
我试图从randomuser.me服务器获取用户信息，并试图在html页面中显示这些用户数据。这就是我想要做的； randomuser.page.ts import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-randomuser',
templateUrl: './randomuser.
浏览 98提问于2019-05-23得票数 0
回答已采纳
我正在使用嵌套的ngFor为我的组件的属性生成一个2D网格，并且在某些条件下，我希望网格元素是可单击的，以便调用函数。有没有一种方法可以使用这种结构，将被单击的数组的indeci传递给函数调用，我将在这里将其与href关联起来？该数组基本上是一个二维三态(未定义、true或false)。数组正在构建并正确显示，但我在计算如何传递从网格中单击的哪个方块时遇到了麻烦。 在组件扩展的基类中： export abstract class BaseGrid implements OnInit {
aGrid: (boolean | undefined)[][];
...
} 下面是组件的ts：
浏览 10提问于2021-07-11得票数 0
回答已采纳
1回答
我有一个数组中的项目列表，
Design
Analysis
Testing
Development
它的索引是，
0,1,2,3
这里我使用的是angular dragula，它是用来拖放列表元素的。通过使用dragula，我改变了数组的位置，
Analysis
Design
Development
Testing
顺序正在改变，但索引位置仍然是一样的，
1,0,3,2
这里的索引位置不在顺序中，它看起来像旧的索引值，尽管它看起来像是顺序。然而，我需要拥有相同的索引位置，无论数组中发生了什么变化，这意味着即使顺序发生了变化，索引位置也应该始终从0,1,2,... so on开始。
我使用过的H
浏览 5提问于2018-06-20得票数 0
所以我正在练习一些Angular/Ionic，我有点难弄明白为什么我的*ngFor不能显示我的数据。这对我来说似乎很简单，但我想我正在做一些非常错误的事情。
所以我有一个看起来像这样的item.interface.ts：
export interface Item {
id: string;
name: string;
}
如下所示的items.ts：
export default [
{
items:[
{
id:'1',
name:'Milk'
浏览 0提问于2017-12-31得票数 0
回答已采纳
4回答
我正在学习Angular2，所以如果我问了一个愚蠢的问题，请原谅我。我正在接收一个对象数组，它看起来如下：
obj.json
data: [
{
item: "banana"
}
],
[
{
item: "apple"
}
],
[
{
item: "lemon"
}
]
在我的组件文件中，我设法将它限定在一个作用域中：
this.fr
浏览 6提问于2017-02-22得票数 8
回答已采纳
我正在尝试使用angular创建以下屏幕。但问题是我无法使用ngModel绑定值。 ? 下面是我尝试过的实现。提前谢谢。 这是我用来绑定值的模型实体- patientModule.ts export class PatientTestDetails {
public testDate?: string;
public specimenType?: string;
public testPrinciple?: string;
public remark?: string;
public hemoglobin?: any;
public wbc
浏览 196提问于2021-05-09得票数 1
2回答
如何使用嵌套字段创建表单，我知道formArray在angular2 RC中，但我有点困惑如何正确地使用它？假设我有这样一个表格
// Main Form with formArray named as `global_modifier`
this.myForm = this._fb.group({
.......
name: ['', []],
global_modifier: this._fb.array([
this.initGlobalModifiers()
])
....
});
removeModifier(i: number) {
浏览 0提问于2016-09-06得票数 4
<mat-toolbar color="primary">
Angular Material 2 App
</mat-toolbar>
<div class="basic-container">
<div *ngFor="let item of names">
<p>{{item}} {{flag}} {{str}}</p>
<button (click)='enable()'>Display&l
浏览 0提问于2018-08-22得票数 3
回答已采纳
1回答
我有一个具有特定ids的行列表：
<li *ngFor="let app of Apps; let i = index>
<div id ="{{app[i]}}" class="row">{{app[i]}}</div>
以及按钮形式的消息列表：
<li *ngFor="let msg of messages; let i = index" id="message-{{ i }}" >
<button type="button" id =
浏览 3提问于2021-02-17得票数 0
3回答
有人可以帮助我一些代码，我有一个简单的ngfor表与输入，我绑定的值的问题是，因为输入是由ngFor生成的，当我在任何输入字段中输入相同的值在所有字段中填充。我如何才能阻止这种情况的发生，我只想在一个字段中键入。
到目前为止，以下是我的代码
takePictureFromCamera(ven) {
let options: CameraOptions = {
quality: 15,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingT
浏览 0提问于2019-04-17得票数 0
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
回答已采纳
2回答
角度数组和ngFor
、、、、
我有一个带有列表的html组件
<div *ngFor="let item of myArr">
<ul>
<li>
{{ item }}
<span>
<mat-icon (click)="expression($event)">add</mat-icon>
</span>
<ng-container
><h2 *ngFor="let item of textA
浏览 8提问于2020-06-09得票数 1
回答已采纳
嗨，我有一个简单的角度组件的问题，我使用一个反应形式插入文本，然后我通过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
回答已采纳
因为最近，当你没有在每个*ngFor上实现trackBy-function时，Angular styleguide-lint-extender "Codelyzer“会抛出警告。我想知道为什么这会被认为是一个问题。
在这个中，实现trackBy的示例可以归结为trackByFn(index, item) { return index;} // or item.id。如果我从索引切换到item.id，这将如何使我的应用程序更快？当涉及到数组的插入或删除时，index是最重要的最直接的事情。为什么ngFor-指令要比较对象的标识值呢？在模块ng_for_of.d.ts中我可以找到_trac
浏览 67提问于2017-12-16得票数 7
回答已采纳
1回答
当在angular.The中使用带有*ngFor的Hammer滑动函数时，预期的结果是对特定的平铺索引的一个滑动，并且该瓷砖将被删除。但通过这样做，动画现在已经不起作用了。我所做的代码在以下链接中：
浏览 5提问于2020-08-17得票数 0
回答已采纳
嗨，我是在angular的新手，我想使用angular显示类型脚本中的数据。我有一个对象，它本身指向一个对象数组。
类型脚本文件
const phones = {
description: 'blablabla.',
characteristics : [
{
rating: 5,
name: "samsung",
country: "south Korea"
},
{
rating: 5,
浏览 19提问于2018-02-20得票数 0
回答已采纳
我在angular 4上工作，我正在尝试实现这样的功能，我可以通过点击十字按钮来删除标签。下面是我的代码：
Component.hmtl
<ul id="ul_top_hypers">
<li *ngFor="let hero of technologies">
<span class="badge badge-pill badge-primary" >{{ hero }}<i class="fa fa-cross-circle-right fa-lg"
浏览 2提问于2017-09-03得票数 1
回答已采纳
在我的angular2应用程序中，我尝试使用一个Github服务，并试图在UI上显示返回数据。
在第一次尝试中，我得到了一个错误，因为“无法找到类型' object‘的不同的支持对象’对象‘”。我发现了错误的原因，并创建了一个自定义管道将对象转换为数组，但仍然无法将数据绑定到UI。
服务代码：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable,of } from 'rx
浏览 1提问于2018-11-27得票数 0
回答已采纳
下面的代码可以在Angular 1.5中运行。只有在启用了该行键的'showFields‘标志时，才会呈现该元素。 <table>
<ng-container *ngIf="showFields[row.key]">
<tr *ngFor="let row of rows">
<td>{{row.key}}</td>
<td>{{row.value}}</td>
</tr>
</ng-container&
浏览 31提问于2020-12-10得票数 0
回答已采纳
3回答
我试图使用NgFor指令显示具有id和name的对象的列表，但下面是错误：
错误:无法找到类型为“object”的不同支持对象“对象对象”。NgFor只支持绑定到诸如数组.之类的可移植项。
下面是供参考的代码文件。
`heroes.component.ts:
此文件已声明英雄对象。
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
@C
浏览 4提问于2018-04-15得票数 2
回答已采纳
1回答
<div *ngFor="let item of category">
{{item.categories.categories.id}}
</div>
这是从api中获取的数据。通过嵌套数组，我无法显示这些数据
浏览 0提问于2019-06-05得票数 0
回答已采纳
这里我使用的是"@angular/cli": "1.2.6"，"@angular/core": "^4.0.0"
我想做什么
我试着做一个反应形式的产品与功能输入。在表单中，如果用户单击“添加功能”按钮，将出现一个包含"type“选择框的新功能列。一旦用户单击功能列中的“删除”按钮，该功能列将被删除。
我遇到了什么问题
问题是，当我试图删除第一个和最后一个特性列之间的特性列时，formControl将成功地用正确的值更新。但是，该已删除功能列的复选框的UI将传递给即将到来的下一个功能列。
我所期望的
一旦移除目标功能列，即
浏览 3提问于2017-09-06得票数 2
回答已采纳
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
2回答
我有一个用*ngFor="let user of users; let i=index;"显示的表格，我想要做的是，当我点击一个按钮时，包含一个表单的模式会打开，这样我就可以编辑数据了。如何将该索引发送到modal？我使用的是Angular 7和Bootstrap 4。
浏览 16提问于2019-05-13得票数 0
回答已采纳
1回答
我试图为angular7制作一个面包屑组件，但是我无法让数组正确地显示在我的HTML中，我想要一些提示，因为我在互联网上找不到它。如果你能帮助我的话，我对棱角还不熟悉，想不出一个更好的方法来制作面包屑组件。
我的component.ts -
breadcrumbLists: Array <any> = [];
breadcrumburl: Array <any> = [];
constructor(private _router: Router) { }
ngOnInit() {
this.listenrouting();
}
listenrouting(
浏览 0提问于2019-02-20得票数 0
回答已采纳
我对web开发很陌生，并且正在使用angular2进行一个普通的堆栈项目。我试图使用ngFor添加带有动态输入列表的模板驱动表单，但是我在实现它的方式上确实观察到了异常行为。我想知道我这样做是否正确.
异常行为:如果我要添加2个或更多输入字段并删除非最后一个条目输入，下次添加新条目时，它会重置刚才删除的条目下面的所有条目。另外，在某种程度上，新条目与上面的条目绑定吗？
这是我的柱塞：
下面是使用ngFor实现具有动态输入的模板驱动表单的方法。我指的是另一个堆栈溢出post:angular-2-template-driven-form-with-ngfor-inputs。
<div *n
浏览 4提问于2016-09-24得票数 6
回答已采纳
这是我的stackblitz https://stackblitz.com/edit/angular-vj4llg 为了打印嵌套的数组值，我使用了Keyvalue管道 <p>Use keyvalue pipe</p>
<ul *ngFor="let stdObj of student">
<li>ID : {{stdObj.id}} Name : {{stdObj.name}}
<ng-container *ngFor="let test of stdObj?.value | keyvalu
浏览 12提问于2019-04-17得票数 0
我使用spread操作符更改了数组引用，但是包含旧值的数组仍然根据inital对象发生变化。
--我还无法复制发生在最小示例上的错误。说真的，我完全不知道发生了什么。
在我真正的代码中，唯一能让它工作的是使用下面的代码，而不是扩展操作符或其他可以用来更改引用的东西。
JSON.parse(JSON.stringify(array))
除此之外，绝对没有工作，即使使用扩展运算符改变了引用。
我在下面放了一个堆栈闪电战和一个代码片段(虽然它们的行为与我的代码不同，但它们的行为是正确的，而我的代码却并非如此)。
import {
Component,
OnInit
} from
浏览 2提问于2020-01-09得票数 2
回答已采纳
我有一个select输入，它从对象列表中选择，显示名称，并将其绑定到表单的字段中。但是，我需要整个对象可以用于change事件。更改formControlName并不是一个真正的选择。
HTML：
<form [formGroup]="form">
<!-- Here I can access $event.target.value to obtain just the userName -->
<select formControlName="userName" (change)="process($event.t
浏览 6提问于2022-01-04得票数 0
回答已采纳
1回答
我有一个叫做removePopUp的函数。当我发送索引时，有时我想要更改数组中该索引中的内容。假设我的数组为0,1,2。当我运行应该返回0、2的removePopUp(1)时，不应该有第3个元素，但是第3个索引将滑到第二个元素，移除该元素。问题是当我使用ngFor显示子组件时，它没有在angularJs中显示该活动。
messages.component.ts
...
userPopUpsArray : BookFaceMessage[] = []
...
removePopUp(index){
index = Number(index)
let usersLength = thi
浏览 2提问于2022-01-01得票数 0
我有一个JSON文件，其中包含待售属性的列表。我正在尝试使用*NgFor遍历数据来创建一个列表。
首先，我对angular和应用程序开发仍然是一个业余爱好者，所以有可能我误解了文档等
我尝试过通过不同的路径进行循环
*NgFor="let post of posts.properties"
*NgFor="let post of posts.properties.property"
但仍然会出现各种错误。
我的理解是，我必须将可观察对象转换为一组属性。然后将其绑定到html。(我认为我所做的属性是数组类型？
json
{
"properties&
浏览 0提问于2019-04-04得票数 0
我在我的组件中有一个@Input，基于它我想构建一个input和复选框。 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent
浏览 8提问于2020-12-18得票数 1
在使用Angular 2时，我遇到了一个问题:显然，我不能在同一个DOM元素上放置两个结构指令(ngFor，ngIf)。
在Angular 1中，这曾经是可行的。对于
<div ng-repeat="item in items" ng-if="$even">{{item}}</div>
当我尝试使用做类似的事情时
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div *ngFor=
浏览 2提问于2016-01-30得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
