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

javascript - 如何在选择复选框角度2时更改ngFor中的表达式

这是我的 html 代码

第一列将显示一些文本,在第二列中它将使用另一个 ngFor 显示复选框。当我选择任何复选框时,我想在第三列中显示选中的复选框。

当我将选定的值打印到第三列时,我知道如何在 jquery 中执行此操作,但在 Angular2 中却不知道。表中的所有第三列数据都在变化我希望每行第二列的检查值显示在该特定行的第三列中

0 投票
1 回答
782 浏览

angular - Angular2:迭代 *ngfor 特定时间 [错误:NgFor 仅支持绑定到可迭代对象,例如数组。]

我正在尝试在特定时间(角度 2.0.0-rc.4)迭代一个 for 循环。例如。5次或10次..

home.component.html :

但是在*ngFor中它会抛出错误:NgFor only supports binding to Iterables such as Arrays.

我是角度的新手。任何帮助,将不胜感激。

home.component.ts :

0 投票
2 回答
13092 浏览

loops - Angular 2 - *ngFor :有没有办法使用替代的结束条件?

我来到这里是因为经过几个小时的谷歌搜索,我没有找到一种方法来为使用内置指令创建的循环使用替代停止条件:*ngFor。

实际上任何 *ngFor 都以这种条件完成循环:index < array.length。我想知道是否有办法以另一个条件结束循环,例如 : i < myVariable

如果您想知道我为什么要这样做,那是因为我正在以这种方式工作的图片库:

在此示例中,我每 3 张图片创建一行。我有三种类型的行: - 显示一张图片, - 显示两张图片, - 显示三张图片。

问题是,我的第一张图片在每一行的索引总是低于用于显示该行的索引。因此,如果我希望能够显示我所有的图片,我必须能够更改我的 *ngFor 的结束条件。

非常感谢您的帮助!

0 投票
1 回答
361 浏览

javascript - 有没有办法防止 Angular 2 RC5 中的 DOM 被移除?

我在使用 Angular 2 和触摸设备时遇到问题。特别是,当一个组件通过 NgFor 渲染并在屏幕上(触摸)拖动时。如果在触摸拖动期间发生 NgFor 的重新渲染(由于外部事件更新绑定到 NgFor 的数据,这在我的应用程序中很常见),则会出现问题。事件touchmove停止触发,并要求您抬起手指并再次将其放回原位,这是一种糟糕的移动体验。如果您使用鼠标,则不会发生此问题。

本质上,在我的应用程序中,我监听touchstart组件上的事件,通过条件*ngIf="isDragging"(不在 NgFor 中)显示另一个“DragComponent”,并根据touchmove事件位置数据在屏幕上移动。

我知道为什么会这样。这是由于 Touch Spec 的浏览器实现。我通常在 vanilla js 中通过将 DOM 元素保存在内存中直到touchendortouchcancel事件触发来解决这个问题。然而,Angular 现在控制着 DOM!他们正在移除仍在使用的元素!

查看这个 plunker http://plnkr.co/edit/QR6WDzv6NxOmn6LXTngG?p=preview以更多地了解我要描述的内容。(注意需要触摸屏,或者在 Chrome DevTools 中使用 Touch emulation)

我还在 Angular 存储库中创建了一个问题#9864,但没有任何回应。我知道他们正忙着为决赛做准备,但我认为这应该在决赛之前解决,因为很多用户会在触摸设备上使用 Angular。

我会很感激任何提示/解决方法/黑客。随时用解决方案更新 plunker。

0 投票
0 回答
454 浏览

angularjs - 为什么Angular2中自定义管道的transform方法会触发这么多次?

为什么自定义管道的变换方法在这个 angular2 循环中使用时会触发多次?我预计它只会发射两次。

非常感谢!

结果在浏览器的控制台中

app.component.ts

我的.pipe.ts

main.ts

0 投票
4 回答
11623 浏览

angular - Angular 2 - ngFor 显示数组中的最后 3 个项目

有一个包含许多项目的数组,我想显示最后 3 个项目。

进入我的 html

它现在显示所有项目(超过 20 个)。我怎样才能只显示最后 3 个?我想我需要在我的代码中使用“最后一个”,但无法弄清楚 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

0 投票
3 回答
5178 浏览

angular - NgFor 仅支持绑定到 Iterables & Bootstrap-Select-Box 为空

解决方案:

我们在这里解决了 2 个问题:

1) httpt.get分配错误,我们收到错误消息:

2) Bootstrap-Select-Box 的时序问题;选项字段为空

1) 错误的分配

以下分配是错误的:

并给出输出:

[对象,对象,对象,对象,..]

在此处输入图像描述

不能通过ngFor迭代的内容应更正为:

为了完整起见,这是ws.get-method

这是该机构

2) BOOTSTRAP-SELECT 和 ANGULAR2 的时序问题

那是 Bootstrap-Select-Box (一点点 - 关于 CI - 改编版本):

selectpicker 的激活发生在:

但是缺少一件重要的事情;选择框是在可观察对象发出数据之前呈现的。因此我们必须先检查是否存在代理,然后渲染该框:

就这样!也许这些信息对你也有用;)

0 投票
3 回答
29700 浏览

javascript - 如何遍历Angular 2中的对象属性

这是我的对象(它有 n 个动态键。我在下面的示例中只显示了两个)

这是我尝试循环抛出上述内容并打印所有值

但以上似乎不起作用。我做错了什么,正确的语法是什么?

0 投票
1 回答
1674 浏览

angular - 角 2