问题标签 [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 投票
5 回答
27699 浏览

json - *ngfor json 数组对象中的错误显示

从rest api获取json数组对象并尝试在ngfor中显示失败,原因是

错误

例外:找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables,例如 Arrays。在 [HomeComponent@5:37 中的索引]

代码

JSON数据

0 投票
4 回答
4136 浏览

angular - angular 2 *ngFor,当iterable还没有被实例化时

我有几个 *ngFor 循环,具体取决于可能尚未实例化的可迭代对象。(例如他们正在等待一个可观察的)

我可以在视图中使用这样的表达式吗?

更新:这是抛出错误的部分

零件

看法

无法读取 [null] 中未定义的属性“内容”

讲座内容是这样的

干杯

0 投票
5 回答
31309 浏览

angular - 如何使用 *ngFor 迭代对象键?

我一直在挖掘,发现我可以使用以下内容在对象上使用 *ngFor:

ObjNgFor管道在哪里:

但是,当我有这样的对象时:

我不太确定如何提取“propertyA”和“propertyB”,以便可以从 *ngFor 指令访问它。有任何想法吗?

更新

我想要做的是呈现以下 HTML:

什么地方等于propertyApropertyB(这就是对象的结构)。因此,这将导致:

0 投票
7 回答
20808 浏览

angular - Angular 2+ - 检查 Pipe 是否返回原始列表的空子集

我有一个要遍历的字符串列表,但我希望能够使用搜索词过滤它们。像这样:

我的问题是:如何检查管道是否返回列表的空子集?

换句话说,如果没有字符串与搜索词匹配,我想显示一条消息:“不匹配”。

0 投票
1 回答
247 浏览

javascript - ngFor 在 Angular2 中更新依赖变量后不会触发

我有 2 个组件:CommandListComponentCommandLineComponent. 在CommandListComponent模板内部,我处理文本字符串上的单击事件:

CommandListComponent模板:

commandlist.component.ts

click被触发时,我将选择的命令传递给adda 的方法CommandLineComponent

在一个CommandLineComponenti 的模板中,使用 *ngFor 打印一个命令列表:

commands但是当我选择更新的命令和数组时, *ngFor 不会触发CommandLineComponent。因此,数据绑定不起作用。commands阵列更新成功:

在此处输入图像描述

谢谢你的帮助。

0 投票
1 回答
27260 浏览

json - 在角度 2 中迭代 Ngfor 上的 json 对象

我在 Ngfor 中迭代 json 对象时遇到问题,有我的模板:

模板:

people 是我要迭代的 json 对象,我得到了 (people | json) 的结果,但没有得到列表,这是一个屏幕截图:

最后,这是 json 文件的一部分:

请随时帮助我

0 投票
4 回答
2144 浏览

javascript - Ionic2 + Angular2 - 带有离子图标星的动态速率值

我正在尝试构建一个从 0 到 5 星(及其中间值,如 x.5 [example 4.5] )的简单动态速率,它从 javascript 接收值。

我用 *ngFor 寻找了一些东西,但我不明白它是如何工作的。有人可以解释/帮助我吗?

如果它有帮助,对于离子,我们有 3 种类型的星星可用:

例如,如果我从服务器收到一个值 rate = 3.5,它会呈现:

我正在使用javascript,没有打字稿。

太感谢了 :)

ps不确定这个标题是否更好,欢迎任何建议:)

0 投票
3 回答
10892 浏览

angular - Angular 2 组件 *ngFor 模板解析错误

我有来自角度2的以下错误:

这是我的代码:

我尝试生成一个模态组件,没有按钮它可以正常工作。为什么这是错误的?为什么不能对对象子数组进行角度迭代?我正在寻找几个小时,请帮忙

0 投票
1 回答
754 浏览

angular - ngFor 重绘组件上的任何事件,即使在 ngFor 之外

我的问题与使用来自 angular.io 示例 plunkr 的 RC1 叉的 Angular(2) 有关。ngFor 模板中的数据绑定函数运行,就好像在 ngFor 之外的任何事件上发现更改检测为真一样。在我的示例中,单击 ngFor 之外的按钮。

我尝试过使用和不使用 trackBy 功能(尽管目前它的文档很差,所以不确定我是否正确使用它);我无法弄清楚如何确保每个操作都不会导致重绘 ngFor,因为这可能会非常昂贵。

单击时的日志结果:

  1. 按钮
  2. 绘画
  3. 绘画

您可以通过查看控制台日志在此plunkr上实时查看问题:

0 投票
1 回答
769 浏览

arrays - 在 Angular 2 中将 ngFor 与对象数组一起使用时出错

我在 Component 类中定义了一个对象数组,如下所示:

在我的模板中,我尝试将它与 ngFor 一起使用,如下所示:

该列表正确显示,但我收到一个控制台错误,上面写着:

异常:./DeskComponent 类 DeskComponent 中的错误 - 内联模板:1:24 原始异常:TypeError:iterator1.next 不是函数

请注意,它适用于字符串数组。有什么我想念的吗?任何帮助,将不胜感激。谢谢。

编辑:仅在 Firefox 和 Chrome 中出现此错误(在 Edge 中工作正常!)

使用 ngFor Angular 2 时出错