无法在Angular 2的html文件中使用*ngFor循环我的界面元素
在Angular 2的html文件中，ngFor是一个常用的指令，用于循环遍历一个集合并动态生成界面元素。然而，有时候我们可能会遇到无法在html文件中使用ngFor循环的情况。
这个问题通常是由于以下几个原因导致的：
- 错误的语法：确保在使用ngFor时，语法是正确的。ngFor指令应该像下面这样使用：
- 错误的语法：确保在使用ngFor时，语法是正确的。ngFor指令应该像下面这样使用：
- 其中，items是一个包含要循环的元素的集合。
- 错误的导入：确保在组件的.ts文件中正确导入了Angular的CommonModule。在使用*ngFor之前，需要在组件的模块中导入CommonModule，例如：
- 错误的导入：确保在组件的.ts文件中正确导入了Angular的CommonModule。在使用*ngFor之前，需要在组件的模块中导入CommonModule，例如：
- 这样可以确保*ngFor指令可用。
- 数据未初始化：如果在使用ngFor之前，集合数据还未初始化，就会导致无法循环遍历。确保在使用ngFor之前，集合数据已经被正确地初始化。
如果以上步骤都正确无误，但仍然无法在Angular 2的html文件中使用*ngFor循环界面元素，可能是由于其他问题导致的。可以尝试以下解决方法：
- 检查Angular版本：确保使用的是兼容Angular 2的版本。不同版本的Angular可能会有一些差异，导致某些指令无法正常工作。
- 检查依赖项：确保项目的依赖项已经正确安装，并且没有冲突或缺失的依赖项。
- 检查错误日志：查看浏览器的开发者工具控制台，看是否有任何与*ngFor相关的错误信息。根据错误信息进行排查和修复。
总结起来，无法在Angular 2的html文件中使用*ngFor循环界面元素可能是由于语法错误、导入错误、数据未初始化或其他问题导致的。通过检查语法、导入、数据初始化以及其他可能的问题，可以解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb-for-mysql
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 人工智能平台 AI 机器学习：https://cloud.tencent.com/product/tiia
- 物联网套件 IoT Explorer：https://cloud.tencent.com/product/iotexplorer
- 移动开发平台 MDP：https://cloud.tencent.com/product/mdp
- 云存储 COS：https://cloud.tencent.com/product/cos
- 区块链服务 BaaS：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
相对来说，我是Angular2的新手，目前正在ngFor循环中导入组件。
当您在ngFor循环中导入具有数据的组件时，它似乎会检查.ts文件中的值，而不是ngFor中使用的局部变量。我想要做的是将ngFor中使用的变量发送到下一个组件。
accommodations.component (父视图)
ts：
import { Component, Input } from '@angular/core';
import { AccommodationModel } from '../../../../models/reservations/accommodation-mo
浏览 0提问于2017-09-07得票数 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
回答已采纳
Error:AppComponent.html:16 ERROR TypeError: Cannot read property 'controls' of undefined at Object.eval [as updateDirectives] (AppComponent.html:16)
app.component.ts：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/fo
浏览 2提问于2017-09-26得票数 0
回答已采纳
我有一个JSON对象，它有多个层次的嵌套对象以及嵌套的对象数组。我想知道如何使用Angular2和*ngFor迭代对象，最后打印出所列的内容。第一个*ngFor工作，但下一个*ngFor给我和错误说Cannot read property nodes of undefined
当前HTML代码
<div class="col-md-3">
<div>
<ol>
<li *ngFor="let item of v
浏览 4提问于2016-06-29得票数 14
我试图迭代一个for循环的特定时间(角2.0.0-rc.4 )。为了前夫。5次或10次..。
home.component.html :
{{arr_length}} //printing 10 i.e. I have specified in home.component.ts
<tr *ngFor="let i of arr_length ; let ind = index">
<td>
//code goes here...
</td>
浏览 4提问于2016-07-30得票数 0
回答已采纳
1回答
角只显示结果数据数组的一部分。
、、、、
继续这个示例，在获得一个成功的API结果之后，我无法获得html组件来显示在TypeScript组件中定义的整个数据数组。只列出一个字段。
这是todo.component.ts文件
import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'todo',
templateUrl: './todo.component.html'
})
export
浏览 4提问于2017-10-19得票数 0
回答已采纳
这是关于Angular2的
如何侦听非窗体元素(如<li> )上的事件(如单击)
side-bar.html
<div class="col-sm-3 col-md-2 sidebar">
{{title}}
<ul class="nav nav-sidebar">
<li *ng-for="#collection of collections" (click)="liClicked(this)">
<a href=
浏览 7提问于2015-08-18得票数 10
我尝试在模板中使用*ngFor迭代数组，并使用*ngIf根据键搜索元素。现在，当条件与密钥匹配时，我想要中断*ngFor。我想知道angular2中是否有任何选项可以根据条件中断ngFor循环。
浏览 1提问于2016-10-07得票数 13
回答已采纳
2回答
我尝试将外部JSON文件中的数组数据显示到html表中。我设法读取了控制台日志中的数据，但无法显示数据。我仍然是Angular 7的新手，所以我可能会在编码过程中错过一些重要的东西，而且我对此一无所知。
app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/https';
import { HttpErrorResponse } from '@angular/common/https';
imp
浏览 0提问于2019-04-13得票数 0
我是Angular2的新手，我正在努力将从http.get()返回的数据显示在我的html中。我已经将问题缩小到对我的api的一个api的get()调用，如果我使用另一个api端点，数据在html中显示没有问题。我知道我的应用程序接口正在检索数据，因为当我对数据执行console.log()操作时，预期的输出就在那里。
服务
//color.service.ts
import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/RX'
import { Http, Respon
浏览 7提问于2017-08-13得票数 0
回答已采纳
3回答
我对Angular 8中的*ngFor有问题。
当我启动Angular app (ng serve) *ngFor工作得很好，但当我改变HTML文件中使用这个循环的地方(即使我在另一行添加一个空格)时，我会出错：
ERROR Error: Template error: Can't bind to 'ngForOf' since it isn't a known property of 'li'.
at createUnknownPropertyError (core.js:15118)
at elementPropertyIn
浏览 1提问于2019-07-20得票数 1
我有一个json文件(product.json)，如下所示，它位于src/assets/：
[
{
"images": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png",
"textBox": "empty",
"comments": "empty"
},
{
"images": "http://openclipart.org/image/300p
浏览 1提问于2017-03-06得票数 0
2回答
目前正在攻读Angular5课程，在对这个主题做了一段时间的研究之后，我仍然不完全理解以下内容：
代码：
App.component.html：
<app-server-element
*ngFor="let serverElement of serverElements"
[element]="serverElement"
></app-server-element>
App.component.ts：
import { Component } from '@angular/c
浏览 5提问于2017-11-12得票数 4
回答已采纳
1回答
既然限制过滤器从Angular 2+中消失了，我如何对一个简单的*ngFor语句应用限制呢？
<div *ngFor="#tweet of singleCategory">
{{ tweet }}
</div>
我不希望*ngFor语句遍历singleCategory的所有元素，我希望将其限制为2个结果。我相信它可以通过自定义管道来完成，但我不知道如何实现它。
谢谢。
浏览 0提问于2016-04-04得票数 73
回答已采纳
我有这样的代码，它使用ngFor解析JSON并将数据列表到表中。
结果会是。
是的，在表中列出数据是很好的。
但是如何实现它来输出特定ID的单个数据呢？
例如，我想要id=3的名称，输出应该是"Edward“。
我不知道该怎么做。有人能帮助我或引导我吗？
谢谢。
app-components.ts
import { Component } from '@angular/core';
import {Http, Response} from '@angular/http';
@Component({
selector: 'app-r
浏览 0提问于2018-05-03得票数 0
回答已采纳
我的问题涉及角度(2)使用RC1叉从angular.io样品柱塞。ngFor模板中的数据绑定函数在运行时就好像在ngFor之外的任何事件上都是真的一样。在我的示例中，单击ngFor外部的按钮。
我尝试过使用和不使用trackBy函数(尽管它糟糕的文档目前还不确定我是否正确使用它)；我无法确定如何确保每个操作都不会导致ngFor的重绘，因为这可能非常昂贵。
单击日志的结果：
按钮
画图
画图
通过查看控制台日志，您可以在此上看到问题：
import { Component } from '@angular/core';
@Component({
sele
浏览 6提问于2016-05-26得票数 1
回答已采纳
我的角html文件中有一个循环：
<div class="board" #board>
<div class="row" *ngFor="let row of this.board; let i = index">
<div *ngFor="let box of row; let j = index" id="columns">
<div
浏览 2提问于2020-11-30得票数 0
回答已采纳
我在流星内部运行了angular 2。我一直在遵循一个关于它的教程，并被困在这个步骤中：
我似乎不明白为什么引用*ngfor的app.component.html文件会抛出这个错误，因为所有的angular & angular2-meteor npm包都安装在我的node_modules目录中。这是我的package.json文件：
{
"name": "angular2-meteor-base",
"private": true,
"scripts": {
"start": "
浏览 2提问于2016-09-04得票数 0
我不知道我的代码有什么问题
无法找到“对象”类型的不同支持对象“对象对象”。NgFor只支持绑定到诸如数组之类的Iterable。
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { Employee } from
浏览 0提问于2018-02-21得票数 1
回答已采纳
1回答
我正在尝试使用ngFor以HTML格式打印JSON数组 TS： import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ng-for',
templateUrl: './ng-for.component.html',
styleUrls: ['./ng-for.component.scss']
})
export class NgForComponent implements OnInit {
public co
浏览 15提问于2020-09-14得票数 0
回答已采纳
2回答
我一直试图进行API调用，但没有成功。显示名称时会收到此错误消息。非常抱歉，我已经粘贴了三个文件，但这是我的第一个问题，我是一个新手。谢谢你的帮助。
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
这是我的beers.service.ts文件
import { Injectable } from '@angular/core';
im
浏览 0提问于2018-12-07得票数 2
回答已采纳
我开始学习Angular2了。我一直遵循在angular.io提供的英雄教程。所有的工作都很好，直到我被使用模板的HTML的杂乱所困扰，我用模板URL代替它，并将HTML移动到一个名为hero.html的文件中。生成的错误是，“无法读取未定义的属性‘名称’”。奇怪的是，指向对象数组的英雄变量可以被访问，这样ngFor将根据数组中的对象数生成正确数量的"li“标记。但是，无法访问数组对象的数据。此外，即使是保存一些文本的简单变量，也不会在HTML中使用{{}}括号显示(参见提供的代码)。
app.component.ts
import { Component } from '@a
浏览 0提问于2016-09-28得票数 73
回答已采纳
1回答
角5嵌套阵列
、、
我试图在嵌套的json输出上使用ngfor。第一个循环工作正常，但内部循环不工作。我的代码是
Ts文件
import { Component, OnInit } from '@angular/core';
import { TiffinService } from '../tiffin.service';
import { IVen } from '../vendor';
@Component({
selector: 'app-tabletest',
templateUrl: './tabletest.compo
浏览 0提问于2018-11-17得票数 0
回答已采纳
2回答
嗨，我正在尝试使用HTTP模块在Angular2中发出一个get请求。
在Typescript (1.5)中，所有内容都编译得很好，但是Chrome显示了以下错误，即in控制台：
EXCEPTION: Error during instantiation of EntryList!. ORIGINAL
EXCEPTION: TypeError: Cannot read property 'merge' of undefined
ORIGINAL STACKTRACE: TypeError: Cannot read property 'merge' of unde
浏览 3提问于2015-08-19得票数 9
回答已采纳
4回答
我是新的角，我正在调用rest并成功地获得响应，但是我无法在我的html文件中通过ngFor迭代这个响应。
这是我的component.ts文件
import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/reg.service';
@Component({
selector: '<app-users>',
templateUrl: 'users.component.html'
浏览 0提问于2019-05-24得票数 1
回答已采纳
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回答
嗨，我在angular 7中使用导航栏，我需要在另一个页面位置上折叠它，当我调整浏览器大小或当我在移动设备上使用我的应用程序时，导航栏将3个栏图标放在显示菜单上，当我单击应用程序中的另一个位置时，菜单仍然显示，我如何折叠菜单？ 这是我的HTML文件。 <nav class="navbar navbar-inverse sub-navbar navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse&
浏览 31提问于2020-12-30得票数 0
回答已采纳
我是Angular 5的新人。我想从.ts文件中获取html元素，并通过ngFor将它们动态添加到html文件中。我试着用[innerHtml]做这件事，但它不工作，并返回给我[object HTMLSelectElement]。我该如何解决这个问题？
transferDataSuccess(event) {
var dropHere = document.getElementById('dropHere')
var dropInSettings = document.getElementById('dropInSettings')
for (var
浏览 0提问于2018-02-09得票数 0
1回答
我有*ngFor与组(它的工作)，我需要显示"listofGroup“(在控制台工作，但考虑到否)，在这个特定的组中，我的问题是:如何在Angular2中的特定div中运行函数
我的html组
<div *ngFor="group in groups">
<h4>{{group.name}}</h4>
//here I want to call function where shows list in this group
//I wrote this but not working
<ul (load)=
浏览 2提问于2017-11-14得票数 2
2回答
我正在尝试使用acx记分板组件，但无法自定义其字体大小和文本转换:标签、值和描述的大写。那么，有没有人能教我怎么做。
app_component.html
<button (trigger)="generateNames()">
Names
</button>
<ul>
<li *ngFor="let item of names">
<acx-scorecard
selectable
[selected]="true"
浏览 5提问于2017-08-18得票数 1
回答已采纳
我需要显示位于对象数组内部的数组质量。我尝试使用下面的代码在ngFor中调用它。我的ngFor用法有问题吗？
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `<table>
<thead>
<tr>
<th>Name</th>
浏览 2提问于2016-11-23得票数 5
你好，我是angular2的新手，学习，尝试建立路线。
app.routing.ts
import {FormApp} from './app.form';
import {Routes, RouterModule} from '@angular/router';
const appRoutes = [
{path:'form',component:FormApp},
{path:'all',pathMatch:'full',redirectTo:'
浏览 2提问于2017-01-29得票数 0
回答已采纳
1回答
我一直在尝试使用ngFor对每组单选按钮进行角度上的检查，它只在循环的最后一组上工作，即只检查最后一个无线电组上的一个按钮。如何使每个循环的无线电组上的按钮被检查？这是下面的代码。我用的是角8
html文件
<form >
<div class="row px-5">
<div class="col-sm-12 col-md-4 px-4" *ngFor="let data of myData">
<input class="form-control mt-3"
浏览 3提问于2020-03-01得票数 0
回答已采纳
我有一些问题，我无法在angular 5中显示来自Firebase的$key值，我得到了所有其他值，但$key我无法显示它
以下是我的服务的代码
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { Employee } from
浏览 11提问于2018-02-21得票数 1
回答已采纳
3回答
在我的组件中，我有一个输入字段i,e text area。在单击特定的text area/ text box时，我将显示如下按钮：
此功能运行良好。
当我单击特定区域时，我希望显示按钮(即，保存)来显示单击的文本区域，只显示。
但是在单击文本区域()时，按钮(保存)将显示所有文本区域，如上面的图像所示。
代码：
模板：
<div *ngFor="let loop of feeds">
<label >
<textarea
(focus
浏览 0提问于2019-05-08得票数 0
回答已采纳
我想用Angular2构建一个有48行的表，我想用一个ngFor来实现。目前，我是通过数组(大小为48)来实现的，但我认为这样效率很低，也不是一种好的编程风格。在Angular2中有没有一种优雅的方式来做html标签的循环？我可以在哪里设置开始和结束，有没有类似于正常的东西？
在组件中，我有这个数组：
private rows = new Array(48);
HTML如下所示：
<table border="1">
<tr *ngFor="#row of rows ; #i = index">
<td>{{i}}
浏览 1提问于2016-03-05得票数 1
1回答
我正在使用Angular 2.0.0-Rance.构建一个Angular 2管道。它应该根据属性栏过滤作为Foo数组传入的所有Foo对象。当我在调试器中单步执行代码时，'allFoo‘变量和'bar’变量都被填充了。我可以断点并在控制台中运行foos.filter()代码，它会返回一个我所期望的数组。当我让函数结束时，它什么也不返回。
是我的代码有问题还是Angular 2 RC4中的bug？
下面是TypeScript：
import { Pipe, PipeTransform } from '@angular/core';
import { Foo } fr
浏览 12提问于2016-09-12得票数 2
回答已采纳
1回答
我的树视图有角2分量选择器：
<navigation-bar [directories]="directories"></navigation-bar>
清单如下：
<ul>
<li class="nav-item ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="fa fa-clock-o">&
浏览 1提问于2017-07-29得票数 0
因此，每当我调用/单击unRelatedFunction()时，它都会使ngFor循环再次重新呈现。有什么方法可以避免这种不必要的连接吗？我使用的是Angular 12。 如果我遗漏了任何必要的信息，请告诉我。谢谢 //html <div *ngFor="let item of arr">{{ create(item) }}</div>
<button type="button" (click)="unRelatedFunction()">test</button> //ts arr =
浏览 55提问于2021-07-06得票数 3
我在一个ngIf中有一个ngFor，我使用索引来检查数组索引处的项是否等于某个值，但是每当我尝试索引任何内容时，它都会给出一个
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: Cannot read property 'visit' of undefined
at AstTranslator.translate (<projdirectory>/node_modules\@angular\compiler-cli\src\ngtsc\ty
浏览 9提问于2021-12-06得票数 0
1回答
在Angular 11中，如果不同的循环具有相同的数据类型，您可以将trackBy函数应用于不同的循环吗？ 例如，假设我循环遍历两个不同的Employee对象数组。我能这么做吗？ 组件： public trackEmployees(index: number, item: Employee): number {
return item.id;
} 模板： <ul *ngFor="let employee of entryLevelEmployees$ | async; trackBy: trackEmployees">
<li>{{ e
浏览 38提问于2021-05-02得票数 0
我认为这可能是一个反应形式的错误。我希望有更多经验丰富的专家提供帮助。
症状:无法在给定时间输入超过一个字符。
发生:当输入是FormArray中的FormArray时
我已经包括了一个柱塞链接如下：。
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
im
浏览 2提问于2017-06-21得票数 4
回答已采纳
我得到以下错误
错误:模板解析错误:不能绑定到'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回答
角度数组和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
回答已采纳
我想知道在angular2中是否有一种方法可以使用*ngFor遍历数组或列表，并跳过第一个或第n个元素
浏览 0提问于2017-02-22得票数 11
回答已采纳
Angular 2文档似乎是正确的。我位于app.component.ts中的字符串数组在app.html中使用*ngFor="let heroes of heroes“调用时似乎无法识别
只是试着浏览一下教程，所有的帮助我都非常感谢！
app.component.ts
import {
Component,
Attribute
} from 'angular2/core';
import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common'
@Component({
浏览 0提问于2016-06-29得票数 3
在我的Angular 2应用程序中，我有一个" users :any“用户列表，其中包含以下属性: name、job、age……问题是，为了获得配置文件图像，我必须从Users对象中获取图像的id，然后使用web服务getImage(ImageId)，所以我的html中包含以下内容：
<div *ngfor="let user of users">
<img [src]="getImage(user.profileImageId)"/>
在这种情况下，我无法显示配置文件图像，我认为html是在数据之前加载的？
浏览 0提问于2016-11-10得票数 9
我尝试了在angular上嵌套for，但我无法获得确切的结果。我尝试了不同的方法，但是我不能得到这个嵌套循环函数的确切结果
我想要一个或多个名称明智的选择框和选项的详细信息包含数据字段。
除了嵌套方法或任何其他方法外，其他方法也是可以的。
请给出解决方案。
这是.ts文件
getSpecialisationSubSelect(id) {
this.postjobService.getSpecializationOptionChangeGetValue(id)
.subscribe(res => {
if (res !== 0)
浏览 0提问于2020-07-06得票数 0
1回答
我想查看调查中的列表请求，但我不知道如何在ionic中使用ng-container
ForLoop.html
SORULAR
<ion-label>{{currentDongu}}</ion-label>
<ng-container *ngFor="let dongu of donguler" [value]="dongu.value">
浏览 3提问于2019-08-09得票数 0
1回答
我希望加载或将 Angular elements as HTML从string编译到组件中。
我将从API获得HTML字符串作为字符串，我希望从该字符串加载和呈现所有HTML结构指令。
let str = `<div>Testing here
<div *ngFor="let i of [1,2,3,4]">{{i}}</div>
</div>`;
setTimeout(() => {
const componentRef: ComponentRef<DynamicComponent> =
浏览 4提问于2022-08-07得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
