tr中的ngFor在angular2中未按预期工作
在Angular2中，ngFor是一个常用的指令，用于循环遍历一个集合，并在模板中动态生成多个元素。然而，有时候使用ngFor时可能会遇到未按预期工作的情况。以下是可能导致ngFor不按预期工作的一些常见原因和解决方法：
- 错误的集合或数据源：首先要确保传递给ngFor的集合或数据源是正确的，并且包含所需的数据。检查集合的类型和内容是否正确。
- 未正确引入ngFor指令：确保在组件的模板文件中正确导入了ngFor指令。在Angular2中，ngFor指令属于公共模块"CommonModule"，因此需要在组件的模块文件中导入CommonModule，并将其添加到@NgModule装饰器的imports数组中。
- 错误的语法或语法错误：确保ngFor指令的语法是正确的，遍历的集合是否按照正确的方式绑定到ngFor指令上。常见的语法错误包括遗漏了*号、没有正确使用let关键字、未正确使用索引变量等。
- 问题出现在异步加载数据上：如果ngFor的集合是异步加载的，可能会导致ngFor在数据加载完成之前尝试渲染模板。在这种情况下，可以使用*ngIf指令来检查数据是否已加载完成，然后再使用ngFor进行循环遍历。
- 其他可能原因：如果以上方法都没有解决问题，可以考虑检查相关的Angular版本、依赖项是否更新，或者尝试重新构建项目并重新运行。
总之，当ngFor在Angular2中未按预期工作时，需要逐一检查以上可能的原因，并逐步排除可能的问题。对于更详细的解答或更复杂的情况，建议查阅腾讯云的Angular相关文档和资源。
推荐的腾讯云相关产品：腾讯云服务器（CVM）、对象存储（COS）、云原生容器服务（TKE）、人工智能开发平台（AI Lab）。
更多腾讯云产品和详细介绍请参考：https://cloud.tencent.com/product
相关·内容
我正在尝试使用ngFor指令呈现一个动态表。它没有按照预期进行渲染。 这是我的html： <table>
<tr *ngFor="let item of items">
<td>{{item[1]}} </td>
<td>{{item[0]}} </td>
<td>{{item[2]}}</td>
</tr>
</table>
</form> 这是在我的控制器中： export class ShoppingCartComponent implem
浏览 15提问于2020-07-11得票数 0
我在玩angular 2(第一天；)。 我正在使用一个显示tr的组件，另一个组件将在其中重复tr。 <h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>
<table class="table">
<thead>
<tr>
<th>Sensor</th>
浏览 111提问于2016-06-08得票数 1
回答已采纳
我已经创建了一个管道来根据ID搜索表。
[
{
"id": "59247cd5a05cfa4966af706d",
"lease": {
"client": {
"client_id": 1,
"client_name": "Test Client 1",
"date_added": "2017-05-12T07:13:46.197000"
},
浏览 0提问于2017-05-26得票数 0
编辑:关于可能的答案的：我也遇到了这个问题/答案，并以这种方式实现了它。但是，对于新版本的Angular2，语法是不同的。关于的文档没有更新(这是我查看的地方)。所以我写错了代码。关于ngFor的文档是在中更新的。Günter写了一个正确的例子，说明如何在较新版本的Angular2 (beta17或更高版本)中使用它。
我想在一个循环中创建多个元素。这就是我现在拥有的：
<table>
<thead>
<th>ID</th>
<th>Name</th>
</thead&
浏览 12提问于2016-05-12得票数 5
回答已采纳
我正在试验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
回答已采纳
在Angular2中，我希望将tr类更改为“如果video.encodings.length>0成功”。以下似乎不起作用。ngClass的表达式可以绑定到数据变量？
<tr *ngFor="#video of _videos" [ngClass]="success : {{ video.encodings.length >0 }}">
</tr>
浏览 3提问于2016-05-04得票数 0
回答已采纳
我尝试递增索引值以创建一个数字为1、2、3、4的列表
<tbody>
<tr *ngFor="let item of queue.truckQueus; let i = index" [attr.data-index]="i">
<td>{{i ++ }}</td> //this throws an error
<td>{{item.truck.reg_no}}</td>
</tr>
</tbody>
如何将1中的数字相加
我还
浏览 0提问于2018-08-01得票数 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回答
我有一个在表中显示一些数据的Angular2组件。
export class DiagnosisComponent {
headers: Array<String> = ["hello world", "hello world"];
table: Observable<TableData>;
constructor(private eventService: EventService) {
this.table = this.eventService.getDiagnosisEvents();
this.t
浏览 3提问于2017-01-09得票数 6
回答已采纳
2回答
我对Angular2相当陌生，我想读出一个json文件。它起作用了，我从REST客户端获取文件，我可以将文件保存在组件中的局部变量中，而且我还能够读取变量的属性。现在，我尝试用ngFor读取其他属性(数组)，但这是行不通的。以下是html：
//Working
<td>{{status.rights}}</td>
//Not working
<tr *ngFor="let folder of status.recfolders">
<td>{{folder.text}
浏览 0提问于2016-10-26得票数 1
回答已采纳
我有一个对象数组(称为设备)，它是在POST方法期间从API中获得的。当我试图在一个简单的html表中填充它时，它可以工作：
<table class="table table-striped">
<thead>
<tr>
<th *ngFor="let property of devices[0] | keys">{{property.key}}</th>
</tr>
</thead>
<tbody>
<tr *
浏览 3提问于2017-01-12得票数 3
回答已采纳
5回答
我需要在Angular2中做同样的事情
<?php
foreach ($somethings as $something) {
foreach ($something->children as $child) {
echo '<tr>...</tr>';
}
}
这可以通过ngFor来实现，而不是在<table>和<tr>之间添加新元素吗？
浏览 6提问于2016-02-06得票数 29
我有一个angular2模板语法，如下所示：
<tr *ngFor="let iter of top_cities">
<td><a [routerLink]="['test',state, iter.key ]"> {{iter.key | titleCase }}</a></td>
HoweverI需要这样做：
<tr *ngFor="let iter of top_cities">
<td><a [routerLink]
浏览 1提问于2016-09-20得票数 0
<table class="table table-bordered">
<tr *ngFor="let item of faculytLectureMaster ">
<td>{{item.lectstart}}</td>
<td>{{item.lectend}}</td>
<td>{{item.facultyname}}</td>
<td>{{item.subjectname}}</td>
浏览 4提问于2017-01-11得票数 0
回答已采纳
我有一个组件，它订阅一些用于填充表的数据。这个表使用*ngFor循环数据数组，并将其输出到页面，这是典型的内容。
当我像so importResults: ImportResults[];一样定义数组时，我的数据似乎会按预期的方式存储，并留下一个对象数组。
ngOnInit() {
// Subscribe to our subject that lets us know about the added employees
this._massEmpService.importedData.subscribe(obj => {
if (obj) {
浏览 4提问于2017-07-15得票数 1
回答已采纳
我在Angular2中有两个嵌套的*ngFor循环。我想要维护一个计数器，每当循环中心的代码被重复时，计数器就会递增。
计数器应从0到调整数乘以刀片数。
<tr *ngFor="let adjustment of adjustments">
<td *ngFor="let blade of blades">
<span> Counter = ????????? </span>
</td>
</tr>
浏览 11提问于2017-02-13得票数 19
回答已采纳
我有一个棱角模板，通过以下方法将子模板传递给它：
@ContentChildren(Item) QueryList<Item> items;
在模板中，这些项放置在表中，首先在表头中用于显示标题：
<table class="table nomargin table-hover">
<thead>
<tr>
<th *ngFor="let item of items" ngClass="{{item.cla
浏览 0提问于2016-06-11得票数 2
回答已采纳
我只想在(click)有值True时才使用True函数。
<tbody class="table-hover domains">
<tr *ngFor="let domain of domains" (click)="gotoDetail(domain.id)">
<td class="col-md-3">{{ domain.name }}</td>
<td>{{ domain.validated }}</td>
浏览 4提问于2016-12-13得票数 5
回答已采纳
1回答
我对角度很陌生，我已经经历过所有的问题，而且似乎找不到正确的答案。
我有这个：
<tr *ngFor="#position of positions">
<td>
<div ng-if="position.way == 0">Long</div>
<div ng-if="position.way == 1">Short</div>
{{position.way}}
</td>
</tr&g
浏览 2提问于2016-04-18得票数 0
回答已采纳
2回答
我正在使用angular2和*ngFor构建一个动态表，如下所示，但是我看不到数据。我不确定{{xcol}}是不是正确，你知道吗？
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>
浏览 0提问于2017-03-20得票数 0
3回答
我想显示一个dataList。有些值是从函数中计算出来的。angular2似乎多次调用calculate函数。
<tr *ngFor="let data of dataList">
<td>{{ data.no }}</td>
<td>{{ data.name }}</td>
<td>{{ calculateFunction(data.price) }}</td>
</tr>
控制台将输出"calculate...“很多次，比dataList.
浏览 0提问于2017-07-20得票数 14
回答已采纳
1回答
在git代码的帮助下，我已经在我的angular2应用程序中开发了一个分页数据表组件
为了实现搜索/过滤功能，我创建了一个管道并将其传递给模板，如下所示：
<tr *ngFor="let item of mf.data | filterPipe: searchTerm">
搜索工作正常，但页面底部的分页没有更新。我认为如果我能更新“数据”，这将会起作用。我能得到任何解决这个问题的建议吗？
浏览 2提问于2016-11-02得票数 1
使用angular 2 seed BS4创建angular2应用程序。该组件使用管道，在我使用Angular2快速入门时它可以工作，但在使用时不能
当我跑步时，我得到：-
> EXCEPTION: Template parse errors: Parser Error: Unexpected token | at column 32 in [ngFor let awsoffer of awsoffers| keys2] in
> AWSOfferListComponent@2:9 ("<h3>AWS Offer List Elements:</h3
浏览 0提问于2016-05-19得票数 12
回答已采纳
给定组件属性groups中的以下数组
[
{
"name": "pencils",
"items": ["red pencil","blue pencil","yellow pencil"]
},
{
"name": "rubbers",
"items": ["big rubber","small rubber"]
},
]
如何创建包含所有项目的html表
浏览 71提问于2016-02-29得票数 33
因此，我用*ngFor填充表，并使用管道对给定的items数组进行过滤和排序。这可以很好地工作，并按预期创建表行。但我也不想在托管表的组件中使用管道的结果。如何使用angular2来实现这一点？
我当前的html：
<tr *ngFor="#item of items | orderAsc">{{item.name}}</tr>
保存结果的旧angularJS方法：
<tr *ngFor="#item of (result = (items | orderAsc))">{{item.name}}</tr>
其中&#
浏览 2提问于2016-01-27得票数 3
1回答
我正在做我自己的组件，在一个带有分页、排序和过滤功能的表中显示数据。到目前为止一切工作正常，但是当我使用filter并且分页处于活动状态时，我不知道如何刷新分页，因为管道直接刷新源代码。示例：
<div class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="
浏览 10提问于2016-09-23得票数 0
我需要编写一个具有如下模板的组件：
<tr>...</tr>
<tr>...</tr>
这必须与*ngFor一起使用，以创建表。组件的选择器是spot-row。该组件有一个名为spot的输入变量。
所需的输出必须如下所示：
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<table>
我尝试了以下几点：
<table>
<tbody>
<spot-row *ngFor
浏览 3提问于2017-03-09得票数 4
回答已采纳
<template ngFor let-item [ngForOf]="faculytLectureMaster" >
<tr *ngIf="item.subjectname != 'Break' && item.facultyname != 'NA'" (click)="OnLectureClick(item,0)"
[class.selected]="item === _selectedHero" >
浏览 1提问于2017-01-16得票数 3
回答已采纳
我收到了这样的JSON回复：-
{
"status": 1,
"message": "Data found",
"list": [
{
"id": "1",
"title": "First Data"
},
{
"id": "2",
"title": "Second Data"
}
],
"tota
浏览 0提问于2018-04-13得票数 0
回答已采纳
这是我的html代码
<tr *ngFor="let Resolution of Resolutions">
<td>{{Resolution.steps}}</td>
<td>
<div class="col-sm-10 ">
<div *ngFor="let Suggestion of Resolution.Suggestions">
<label >
<inpu
浏览 6提问于2016-07-29得票数 1
1回答
我正在尝试显示一个带有值的表。表有5列，在第3列中，我需要来自另一个表的值。我如何实现这一点？
我的html标记是：
list.component.html
<table >
<thead>
<tr>
<th> first </th>
<th> second </th>
<th> Third </th>
浏览 2提问于2017-03-02得票数 1
回答已采纳
1回答
我正在学习角-2，并试图构建数据网格组件，并遇到一个动态插值的问题。假设另一个组件将消耗数据网格，如下所示：
<data-grid [model] = 'users'>
<column header='Last Name' value="lastName" ></column>
<column header='First Name' value='firstName' ></column>
<column header='A
浏览 2提问于2016-06-01得票数 1
回答已采纳
我正在尝试在表达式绑定中使用值。我知道这是无效的，但我想知道类似的事情是否可能发生。如果不是，有没有别的办法呢？
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'Home',
templateUrl: './views/home/home.html'
})
export class HomeComponent implements OnInit{
rows = [
{ 'FirstName': '
浏览 0提问于2016-12-22得票数 2
回答已采纳
我有一个Angular2组件(PropertyComponent)，它与引导表的每一行的属性选择器一起使用：
<tbody>
<tr app-property *ngFor="let property of properties" [property]="property"></tr>
</tbody>
我想通过根据属性对象的内容添加一个类来对<tr>行进行样式化。这是我无法做到的，因为我想将样式逻辑放入PropertyComponent中。我可以更改代码以使用组件选择器：
<tbody>
浏览 7提问于2017-08-17得票数 1
回答已采纳
这是我的HTML表
<table class="table table-bordered">
<thead>
<tr>
<th *ngFor="let th of tableHeaders"> {{th}}
<th>
</tr>
</thead>
<tbody *ngIf="tableData.len
浏览 2提问于2017-03-06得票数 0
你好，亲爱的，极客，我对angular2有个问题:我正在用angular2开发一个应用程序
(menuComponent, menuView.html)
(listProductComponent, listProductView.html)
(detailProductComponent, detailProductView.html)
我在menuView.html中有一个按钮来添加像这样的新产品
<ul class="nav nav-tabs">
<li><a class="active" [routerLink]=&
浏览 2提问于2016-03-01得票数 2
回答已采纳
1回答
我动态地呈现复选框和combobox字段，并执行以下功能：
根据API响应，如果复选框字段显示为选中，则combobox将显示为enable，否则将禁用。
如果用户选中复选框字段，则应禁用组合框。
组合框字段为第一种情况工作，而在第二种情况下不工作。状态(启用或禁用)不能稍后更改。
下面是我的模板片段：
< tr *ngFor="let widgetAttribute of _preferencesWidget">
< td *ngFor="let subattribute of widgetAttribute.methods&#
浏览 11提问于2016-12-06得票数 1
回答已采纳
我想用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
我正在将一些PHP Twig模板转换成一个新的Angular5项目，并且我被困在如何处理一个简单的循环上。
在我的原始Twig模板中，我遍历了一系列数据，其中包括一个Month列。数据已经按月份排序，我使用它在循环中通过保存变量为每个月创建一个标题，如下所示：
{% set savedMonth = '' %}
{% for result in results %}
{% set thisMonth = result.month %}
{% if savedMonth != thisMonth %}
<tr bgcolor='#c0
浏览 1提问于2018-04-28得票数 0
0回答
好了，我在boot.ts中启动了一个服务，除了设法让我的模板工作之外，一切都很好。我很抱歉不能用HTML / angular行话表达我自己，但我相信我的问题是相当明显的。
我的简化的*ngFor循环目前看起来像这样。
<div *ngFor="let comment of comments">
<div>{{comment.body}}</div>
</div>
正如预期的那样，输出如下所示
<div>
<div> First comment </div><!-- 1st com
浏览 1提问于2016-07-13得票数 0
我在angular 6中有一个表。这是一个工作的find，但我想在ngfor中使用它，但它不能像预期的那样工作。下面是表格：
.hiddenRow {
padding: 0 !important;
}
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th&g
浏览 0提问于2018-12-12得票数 0
我有一个angular2应用程序，我有这样的结构
车身组分
-车身顶部构件
-车身底部部件
我在顶部组件中有一个输入框"Filter Data“，在主体底部组件中有一个数据表和一个管道"filterData”。
车身顶部构件:：
<input [(ngModel)]="searchInputBox" type="text" name="searchInputBox" >
车身底部构件:：
<tr *ngFor="let d of data | filterData:searchInputBox&#
浏览 4提问于2017-03-20得票数 0
回答已采纳
我有一个在angular2中创建表的片段：
<tr class="d-tbody-tr" *ngFor="let row of rows;let i=index">
<td *ngFor="let col of cols;let j=index">
<label>{{ data_hash[row][col]}}</label>
</td>
</tr>
如果正数为黑色或红色字体，我该怎么写呢？
浏览 2提问于2017-10-30得票数 0
回答已采纳
我有一个Angular2 (2.4.0)应用程序，它在ngFor循环中显示一个列表，我注意到每次移动鼠标时，列表都会重新呈现。有没有其他人注意到类似的行为和/或知道为什么是这样的？
正在重新呈现的表：
<table class="responsive-table bordered highlight">
<tbody>
<tr *ngFor="let person of getPersons()">
<td>{{person.name}}</td>
</tr>
浏览 0提问于2017-01-13得票数 0
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
回答已采纳
我希望用Angular2实现以下目标，对于列表中的每个条目，都有一个包含多个列的tr标记，然后使用另一个(或两个)跨越所有列的tr标记。
<table >
<tbody>
<tr>
<td> field 1 </td>
<td> field 2 </td>
<td> field 3 </td>
</tr>
<tr>
浏览 1提问于2017-02-01得票数 2
回答已采纳
假设我有非常大的单元格网格，我想添加数据行和数据列属性值，并从模型绑定。如何从angular2 (Dart中的beta0)绑定数据行。
与数据行=“{{boundVal}}”的绑定似乎不起作用。(输出html中没有数据属性)
例如：
<table>
<tr *ngFor="#row of rows" >
<td *ngFor="#cell of row.cells" data-row="{{row.index}}" data-col="{{cell.index}}" >
浏览 0提问于2015-12-22得票数 93
回答已采纳
6回答
我在对Angular2中的对象数组进行排序时遇到了问题。
该对象看起来如下：
[
{
"name": "t10",
"ts": 1476778297100,
"value": "32.339264",
"xid": "DP_049908"
},
{
"name": "t17",
"ts": 1476778341100,
"value": "tru
浏览 10提问于2016-12-12得票数 26
我有这张桌子=>
<table class="table table-bordered" *ngFor="let list of lists">
<caption>{{ list.nodename }}</caption>
<thead>
<tr>
<th>Название сервиса</th>
<th>Статус</th>
</tr>
</thead>
浏览 2提问于2016-07-04得票数 0
回答已采纳
我有一张简单的桌子
<table class="table table-bordered table-condensed table-hover table-striped ">
<thead>
<tr>
<th>Benutzer</th>
<th>Vorname</th>
<th>Nachname</th>
</tr>
</thead>
<tbody>
<tr
浏览 2提问于2017-03-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
