问题标签 [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 回答
9337 浏览

html - ngFor 生成表中的表单输入值

我希望能够为表中的任何玩家提交一个号码。

我在 Angular2 中使用 *ngFor 生成一个表。
对于该表中的每个元素,我添加了一个带有输入字段的表单。

如何提交并包含这些表单的输入值?

我无法从输入框中提交和检索值。为我可以定义然后添加到作品
中的静态形式做它。id="inputname"#inputnameinputname.value(submit)="onBid(inputname.value)"

我已经尝试过adding id={{player.id}}#{{player.id}}但不知道如何将其添加到onBid().

0 投票
1 回答
1497 浏览

json - 使用 *ngFor 检索和显示 json 对象

我想从 angular2 中的 json 文件中检索信息。为此,我按照示例How to display json object using *ngFor创建了这个自定义管道

这是我在组件中使用的模板:

这是我的 json 文件:

我想检索例如“状态”和“类型”,但我检索一个字符数组,如下所示:

值:{ 值:" 值:s 值:t 值:a 值:t 值:u 值:s 值:" 值::值:" 值:s 值:u 值:c 值:c 值:e 值: s 值: s 值:“ 值: ,值:” ...

我像这样解析我检索的对象:

有谁知道为什么我检索字符数组而不是我想要的字符串数组?我想指定我遵循这些示例:使用 *ngFor 访问对象的键和值 Deep nested json to array in array / json rendering of Angular 2 *ngFor

我认为这不是解析json的问题,而是将其检索显示...

谢谢你帮助我

0 投票
1 回答
6501 浏览

performance - Angular 2 性能 IE11 *ngFor

我正在尝试 Angular 2,我注意到 Internet Explorer 11 上的性能在使用 *ngFor 超过 1500 个项目时非常缓慢。使用 IE11 大约需要 25 秒,而在其他浏览器上则不到 1 秒。

暂停调试器我注意到代码不断调用es6-shim.js 中的isNan函数。这里是调用堆栈:

在此处输入图像描述

在这里工作的 plnkr:http://plnkr.co/edit/sEujClHmuCbrydIiYQYL?p= preview。代码非常简单:

有同样问题的人吗?任何提高性能的解决方法或提示?

先感谢您。

0 投票
1 回答
10702 浏览

angular - *ngFor 对象属性未定义

我从来自 Angular 1 的 Angular 2 开始,我不知道如何在对象的属性上使用 ngFor。 this.myVar是根据定义attr属性的 HTTP 请求的结果定义的。

这是我的代码:

这是错误:

例外:TypeError:无法读取 [myVar.attr in ...] 中未定义的属性“attr”

谢谢!

0 投票
2 回答
109 浏览

http - *ngFor 的渲染顺序在 HTTP/JSONP 调用后不可靠?

我使用来自“键”数组的信息进行 JSONP 调用,这些“键”按特定顺序排列。我希望生成的新数组与键的源数组的顺序相同。这种情况有时会发生,但并非总是如此。

我试过forEach,for循环,一个只有键值的简单数组,以及一个字段“name”后跟键值的数组。不知道为什么我不能得到一致的订单。以下是一个简单的数组和键值。

从主要组件来看:

0 投票
0 回答
1476 浏览

angular - angular2:在嵌套的 ngFor 中“显示更多”

我正在尝试在 angular2中实现与此解决方案类似的东西。我知道我可以使用切片管道来限制迭代次数(类似于limitTo)。问题是,angular2 上没有 ng-init 指令,并且局部变量在这种情况下似乎不起作用,而且我不能在组件级别使用变量,因为它应该是每个子实体的本地变量(如所见在下面的示例中)。

0 投票
1 回答
5057 浏览

javascript - 如何在子组件中使用 ngFor 索引变量

我使用 ngFor 从数组中创建了一个列表,并且我正在通过其他组件导入该列表的元素。

在我的列表组件中,我使用 ngFor 来获取索引,我想在子组件中使用这个索引(参见代码)来创建动态变量,但我似乎无法让它工作。

在“taskService”中,我有一个点击方法——editTask(i)——我希望能够传递数组项的索引

我的课看起来像这样:

我希望我已经解释得足够好,如果您需要更多信息,请告诉我!

0 投票
1 回答
2930 浏览

angular - 在 ngFor 中加载最后一项后调用指令

我有一个包含表格的组件,我在 tBody 内的一行上调用 ngFor,问题是我需要在加载 ngFor 的最后一个元素后运行在表格上应用的指令。

这是我的组件

我的指令:

在这里,我尝试了多种东西,其中最后一种最有意义,我将 ngIf 中的“最后一个”传递给一个函数,但是当我在控制台上记录接收到的值时,它是未定义的

在角度 1 中,我实现了我想要使用的东西

0 投票
2 回答
2226 浏览

angular - 在 Angular 2 中使用 *ngFor 访问 HTML 模板中的局部变量

我正在尝试在 Angular 2 中使用 ngFor,示例代码如下

我想在锚标签中应用 *ngIf 以仅显示 facet.count > 0 的标签,如下所示:

但是 facet 在锚标签中不可用,它只在<a>标签内的模板中可用,我怎样才能实现相同,有什么解决方案。

0 投票
1 回答
59 浏览

angular - 使用http angular2获取数据时ngfor失败

跨域请求被阻止:同源策略不允许在http://localhost:8080/index/home读取远程资源。(原因:缺少 CORS 标头“Access-Control-Allow-Origin”)。

客户端运行在 8000

rest 服务运行在 8080 并且服务有 @CrossOrigin(origins = " http://localhost:8000/ ")

但仍然无法正常工作