问题标签 [ngfor]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
16950 浏览

angular - *NgFor 不显示数据

我正在编写我的第一个 Angular2 应用程序。

我有一个BankAccountService从我的后端服务器获取数据的一个bank-account.component,它使用这个服务来简单地显示一个未排序的 accountNumbers 列表。

通过 chrome devtool 进行调试,我能够看到数据已正确获取并存储在bankAccounts数据成员中,但由于某种原因,ul什么也没有显示。

银行账户服务:

银行帐户组件:

如果有人能阐明一下,我将不胜感激,我似乎无法理解我的错误。

提前致谢

0 投票
2 回答
3868 浏览

javascript - 如何在 ngFor 之外使用 *ngFor 当前对象?

标题可能看起来很奇怪,但我所说的基本上就是这个链接在做什么。

我正在寻找一种在范围之外使用当前迭代person的方法。<tr>*ngFor

在他使用的链接中ng-repeat-startng-repeat-end包含多个标签,ng-repeat.我如何使用 Angular2 实现相同的行为*ngFor

0 投票
1 回答
908 浏览

angular - *ngFor 中的 Angular 2 更改检测似乎不起作用 (RC5)

在我的 ng2 模块中,另一个模块调用一个函数来创建一个对象并将其推送到一个绑定到模板中 *ngFor 的数组。根据文档https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html它应该自动检测更改。我可以控制台记录数组,一切都在那里,但选择器标记保持为空。如果我使用静态数组作为测试它可以工作。我在这里和其他网站上查看了所有看似相似的问题以及文档中的 ChangeDetectorRef,但我发现的都是几个月前的,如果我尝试会导致错误。

这是marker.component.html:

这是marker.component.ts:

静态写入的“令牌”按预期显示和工作,但没有新添加。

0 投票
1 回答
1293 浏览

jquery - Angular2 ngFor 崩溃总是一样的

这里是一个菜鸟网络开发人员。

我曾经*ngFor创建我的<tr data-toggle="collapse" data-target="#details">. 我的经验是,单击一行总是会折叠相同的div,而不是与之匹配的。

可能必须与他们都获得相同的ID(?)

我做错了什么,我怎样才能实现我正在寻找的东西?

代码:

提前致谢!

0 投票
1 回答
8366 浏览

templates - Angular 2 *ngFor 显示组件模板不起作用

我在“results.component.ts”中有这个集合: results: Result[]

我想遍历集合,显示每个结果。

我想为此创建一个单独的组件,称为 result.component.ts。这是因为结果可能会变得复杂而庞大。

到目前为止,我没有显示任何内容。输出 html 有一些注释掉的模板绑定:

这是我的相关代码:

结果.component.html:

结果.component.ts:

结果.component.html:

结果.component.ts:

如何将 1 个结果的结果数据从 results.component 传递到 result.component。

如何让 result.component.html 为每个结果显示一次?

0 投票
1 回答
201 浏览

node.js - Angular 2:未捕获的错误:非法 HTML 属性名称:*ngfor

我有 angular 2 在流星内运行。我一直在关注它的教程并坚持这一步:

http://www.angular-meteor.com/tutorials/socially/angular2/dynamic-template

我似乎无法弄清楚为什么引用 *ngfor 的 app.component.html 文件会抛出该错误,因为所有 angular 和 angular2-meteor npm 包都安装在我的 node_modules 目录中。这是我的 package.json 文件:

这是 app.component.html:

这是 app.component.ts:

这是我的 index.html:

这是我的 main.ts:

控制台输出:

在此处输入图像描述

我相信我的文件与教程完全匹配,但也许我只是没有看到明显的东西......

更新 1:我刚刚删除了我的 node_modules 目录并重新运行了 meteor npm install 然后从教程的 git repo 重新复制了客户端文件夹中的所有文件内容,但仍然无法正常工作。它仍然无法识别 *ngFor 标签,它以某种方式告诉我我的流星项目无法识别角度,或者可能是我的节点安装和操作系统浏览器组合。我在 Windows 7 上使用 Chrome,节点版本:v6.3.1

更新2:我认为@neeraj 提到我应该首先解决的问题......那就是我的 app.component.html 文件不应该有 head 或 body 标签。我认为这是正确的,因为流星将您的 html 文件内容添加到其“主”html 文件中,因此不需要头部和身体标签。但是,当我在 app.component.html 文件中省略 head 和 body 标记时,会引发此错误:

0 投票
3 回答
11794 浏览

arrays - Angular2 *ngFor: "Cannot read property '0' of undefined"

I trying to get data from a JSON file to build a form.

Here is a portion of my template:

Here is part of the remote JSON file:

It works with no problem and i get newbie and other choices in the select menu. But i want to loop on places, so i edit the html template in this way:

Here is the service that i use to grab data from JSON file:

and here is the hero.component:

But i get "Cannot read property '0' of undefined" error.

Why?

0 投票
1 回答
1163 浏览

angularjs - ngFor 不工作 angular 2 并显示空白页

我观看了 youtube 视频,并尝试完全按照此链接https://www.youtube.com/watch?v=bKWDKmHvF78&index=8&list=PL6gx4Cwl9DGBYxWxJtLi8c6PGjNKGYGZZ上的视频进行操作,但 ngFor 根本不适合我。当我用 ngFor 写作时,它会显示空白页。

//app.component.ts

//app.component.html

//main.ts

//播放列表.component.html

//播放列表.component.ts

0 投票
2 回答
1718 浏览

javascript - Angular2子组件在ngFor中意外销毁

所以我有一个 from 的这个组件,其中包含一个@Output在提交时触发的事件,如下所示:

我正在使用一个ngFor来创建这个 Component 的多个元素:

最后缺少的部分是提交时使用的服务:

submitForm()函数的开头,this.onSubmit.observers是一个包含一个观察者的数组,就像它应该的那样。

一旦它到达回调方法,在哪里this.onSubmit.emit()被调用,它this.onSubmit.observers就是一个包含零观察者的数组。

我正在经历两种非常奇怪的行为:

  • 如果我删除了更新后端的实际调用,SomeService.updateBackend它工作得很好,而且observers仍然是一个包含一个观察者的数组!
  • 如果我保持对后端的实际调用但不使用ngFor和只显示一个<some-element>,它也可以正常工作,将一个观察者保持this.onSubmit.observers在回调范围内!

知道我在做什么错吗?

提前致谢!

更新:

感谢@StevenLuke 关于记录的评论ngOnDestroySomeComponent我发现它在发射之前就被销毁了。

实际上,完成后它做的第一件事SomeService.updateBackend就是销毁该组件的所有实例并重新创建它们!

这就是让观察者发生变化的原因!为什么会这样?

0 投票
1 回答
135 浏览

angular - 如何获取ngFor生成的局部变量数组?如果可能的话

下一个代码在 every 上创建局部变量<div>,对吗?

如果是这样,我怎样才能得到<div>'s 的数组?