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

json - *ngFor 不适用于动态值

处理一些数组项目,但卡在 *ngFor 不接受另一个提供的动态值的地方*ngFor

在注释行中,我想提供json.total_fa.categorycategory是来自*ngFor 上面声明的另一个的来源。但没有得到任何结果,似乎有角度试图找出json.total_fa.category不存在的自己。

但我想加载json.total_fa_term1(这是该类别的第一个索引)。我怎么能做到这一点。

  1. 我可以在同一个 HTML 组件上使用多个 *ngFor 吗?

  2. 有时 *ngFor 和 *ngIf 在嵌入同一元素时无法正常工作,为什么?

这是我的工作区演示

0 投票
1 回答
248 浏览

typescript - 在子元素中使用 ngFor 的局部变量

我想显示局部变量的属性,theme例如theme.name.

这就是我的*ngFor样子

我也尝试使用{{theme.name}},但这也不起作用。

0 投票
3 回答
11599 浏览

javascript - 在 ngFor 中计数 - Angular 2

我在计算 Angular 2 中的 ngFor 循环时遇到问题。我正在尝试开发一个具有 3 列和动态行数的网格。我想遍历我的数组并从左到右添加元素,每三个元素它应该跳到下一行。我使用离子框架 2.0。

我的代码如下所示:

希望你能帮助我。

干杯!

0 投票
1 回答
1523 浏览

typescript - Angular2 ngModel 更改多个值,因为它位于 ngFor

我有一组条件,每个条件都有不同的模板,我都准备好修复动态内容加载器。但是现在当我选择一个影响每一行的条件时我遇到了一个问题,因为它在一个 ngFor..

在这里,您可以更好地查看结果: https ://www.dropbox.com/s/e4xg3q4ym2zdhw8/condition.jpg?dl=0

正如您所看到的,每一行的模板都不同,但如果我在一行上选择一个条件,一切都会改变。你知道如何解决这个 for 循环还是有其他方法可以解决这个问题?

这是模板的代码:

这是组件的代码:

0 投票
2 回答
980 浏览

angularjs - 我可以扩展一个角度组件并在 ngFor 循环中引用基本组件吗?

是否可以以角度扩展组件?如果是这样,如果它们都扩展同一个基本组件,我可以创建多个不同组件的列表(通过 ngFor 循环)吗?

例如,如果所有菜单项都扩展同一个“CustomMenuItem”组件,我的自定义菜单栏是否可以包含不同种类的菜单项列表?有些是下拉菜单,有些是按钮,有些是文本框等,但都将共享一些基本功能......

0 投票
4 回答
100284 浏览

angular - 如何在 ngFor angular 2 内部使用 track

尝试了所有我能猜到的语法都不能让它工作!

对我有用的唯一方法是

  1. 在控制器类中创建方法

    识别(索引,发布:发布){ 返回 post.id }

这是唯一的方法吗?我不能只为 trackBy 指定一个属性名称吗?

0 投票
1 回答
496 浏览

javascript - 使用 Angular 2 生成 html 标签

是否可以使用 AngularJS 2.0 生成 html 标签。我正在使用 Polymer,并尝试使用在Users中定义的小部件填充仪表板entitlements

我相信您必须拥有<li></li>NgFor 的标签?那么你能做这样的事情吗:

生成类似的东西:

0 投票
4 回答
34831 浏览

angular - ngFor 在行和列问题上使用 ngClass

我正在使用 Angular2 及其 ngFor。我想为奇数行和偶数行添加类,所以我可以通过颜色在视觉上将它们分开。

这是我的代码(实际上不起作用):

虽然如果我这样做,代码可以工作:

有没有更好的方法将类放到行而不是列?先感谢您。

0 投票
1 回答
1727 浏览

typescript - Angular2异步管道在ngfor中不起作用

当我在*ngFor.

这里有一些代码:

这是模板

_filtersPageState变量声明为:

并使用以下select函数对其进行初始化@ngrx/store

商店内的FiltersPageState对象是通过 http 请求填充的,如果我@ngrx/store在控制台日志中打印该对象,我可以看到 get 请求已正确执行。

我的问题是,当async管道放置在 . 内时ngFor,组件无法加载,并且 Chrome 控制台中没有错误。

{{_filtersPageState.value | async}}如果我在 html 模板中写入,Observable则正确显示的值。

我在玩 beta 13

有什么线索或建议吗?谢谢!

编辑

我注意到,如果我{{_filtersPageState| async}}在模板内部编写并同时编写一个(即使在没有管道ngFor的简单数组上循环,我的组件也会中断(无声地)async

编辑 2

我想在拼图中添加另一个图块。

以下模板破坏了组件:

这就像如果asyncngFor不想在一起:(

编辑 3

我发现 ngFor 内部没有管道在工作:

在所有四种情况下(也是aaaaaaaaa一个不存在的管道),我的组件无法加载而没有错误。

0 投票
1 回答
6607 浏览

javascript - ngFor 之后的 Angular 2 触发事件

我正在尝试使用 jQuery 插件来替换 Angular 2 中一些动态元素中的默认滚动条。

这些元素是使用ngFor循环创建的,也就是说,我无法将 jQuery 事件附加到这些创建的元素上。

应用程序有时会改变一个Observable在 内部循环的对象ngFor以呈现视图。

现在,我想知道 Angular 何时完成绘制我的元素,以便我可以运行 jQuery 插件。

  • 我不想在 HTML 模板中包含任何 javascript。
  • 我不想使用ngAfterViewInit,因为这个钩子被触发了太多次
  • 我不想实现基于 setTimeout 的解决方案(我认为它不可靠)

我通过使用以下自定义找到了解决方案Pipe:在模板中的循环结束时ngFor,我写道:

FireStoreEventPipe类似的东西在哪里:

但是这个解决方案并不能让我满意。

有什么更好的方法建议吗?

谢谢