问题标签 [angular2-pipe]

我有一个服务，它返回一个 Observable。现在我正在寻找正确/最有效的方法来从此 Observable 获得多个结果，而无需编写太多代码。

• MyService返回一个Observable<Array<Foo>>

• MyComponent调用myService.getFoos()并应输出数组的前 5 个元素、数组的总长度以及未显示的元素数。

这是我当前的代码：

结果看起来不错，但我使用了async4 次管道。其中（据我所知）将导致 4 个订阅。我猜这根本没有必要（？）

当然，我可以在constructorof 中手动订阅MyComponent，然后在没有async管道的情况下生活。但后来我必须照顾自己退订。

有没有其他方法来处理这个？

我正在使用 Angular2 创建一个动态表。我创建了一个带有 2 个管道的 angular2 组件：第一个管道从用作表的列的 JSON 对象中获取密钥（工作完美），而第二个管道必须从 JSON 对象获取值（不工作）结果我得到的是[object Object]但不是价值，对不起，如果这个问题是重复的，我无法在 WEB 的其他地方找到任何解决方案，所以我发布这个，请帮我解决这个问题

以下是我的代码供您参考

app.component.ts

管道.ts

app.component.html

我正在为“INR”使用 angular2 货币管道，并愿意以

12,89,253 instead of 1,289,253||12,89,43,56,453 instead of 12,894,356,453

即按照印度货币格式而不是国际格式系统格式化金额。我在文档中找不到任何可能性。帮助！

我创建了一个管道来格式化输入框中的值，如下所示：

1 123

10 123

101 123

2 101 123

23 101 123

123 101 123

当我在输入框中键入或按退格键时，管道会给出所需的输出。

问题：当我从输入框中删除空格时，输入框不会更新。

例如，如果我将值从 123 123 更改为 123123，则输入框不会更新。

管道：

HTML：

零件：

Plunker：https ://plnkr.co/edit/j5tmNxllfZxP0EDp2XgL?p=preview

知道为什么会出现这种行为以及如何解决/解决这个问题吗？

我创建了自己的管道，用于过滤表中的任何字段。当我将字符串放入搜索框中时，它会在我的控制台中正确打印“找到”，但表格中没有显示任何行。当我完全移除管道时，一切正常，表包含所有记录。

和管道：

问候

我正在尝试构建一个搜索字段来过滤我的表格行，但我遇到了一些问题，因为我在管道中的“值”是未定义的。

这是我所拥有的：

管道：

零件：

所有数据都正确填写在我的模板中，问题是当我尝试搜索时。调试后我注意到我的管道中 value 参数的内容是未定义的。

这是模板：

这是错误：

我想使用 adiv作为容器。在该容器中，我想用*ngForor填充最多 3 个元素*ngRepeat。达到该限制后，我希望div生成一个新的父实例以继续填充数据。

到目前为止，我已经尝试过了

我遇到了这个 Angular 2：如何对 *ngFor 应用限制？

我最初认为这是答案，但它只是将元素限制为 3 个条目，而且它适用于整个容器而不是其中的元素。我希望它们以 3 行的形式水平跨越屏幕，而不是全部的 1 行。

到目前为止，我发现我必须像这样将*ngFor和*ngIf编码向下移动到子元素中

这可以像我想要的那样将它保持在一行中，但是我无法理解如何告诉 Angular 创建父级的新实例并继续填充到其中。

到目前为止，我遇到了这个用于分页的https://github.com/michaelbromley/ng2-pagination，但它本质上是我希望它以某种方式做的事情。我想我基本上必须以某种方式告诉它同时显示 2 页。我读得越多，就试图弄清楚如何以我需要的方式使用它时，我就越感到困惑。

到目前为止，我在想我需要创建一个自定义管道来绑定到*ngIf父div级中的一个，以便告诉它在它有 3 个子元素后执行我希望它执行的操作。在我开始那段旅程之前，我想知道是否有任何可能的方法可以使用开箱即用的 Angular 2 来做到这一点。如果没有，我怎样才能做到这一点？提前致谢。

更新

评论中发布的 plunkeryurzui正是我需要做的，您可以在此处查看https://plnkr.co/edit/q9olLVsEcGrskv8oQkV7?p=preview。我开始将它应用到我的网站上，但遇到了一些问题。

对于初学者，我使用 firebase 作为 angularfire2 的数据库。这意味着我有一个大对象和其他大对象，其中一些对象实际上是相同类型数据的数组。因此，我让绑定正常工作的唯一方法就是这样。

我不能说

因为homeIntroData$它本身不是一个数组。“伟大的Yurzui”在plunker的哪里炮制它是这样设置的

我什至还没有开始深入研究如何让管道工作，因为我一直坚持如何以一种允许我应用它的方式获取我的数据。这里重要的是能够将 加载links到限制为 3 个子元素的父元素中，然后link像在 plunker 中那样加载每个父元素 3 次的子元素。

我遇到了这篇文章https://github.com/angular/angular/issues/6392，它讨论了数据不是数组的问题，并建议将数据分解成我们可以直接链接的块。所以我像这样修改了我的组件的类

看到我必须{{link.link}}在绑定中使用才能显示所有内容，我想我可以像这样制作子元素

但当然我[object object]又得到了一个错误。所以我真的不知道如何调用我的数据来处理它。导出JSON的homeIntroData为

另一件事是，如果您查看 plunker，您会看到 Yurzuichunk像这样添加到绑定中

如果您查看文件的其余部分，app.ts您会发现它没有在任何地方定义。有chunks在管道中，chunkSize在 中PipeTransform，但没有chunk。我什至玩弄了它，把它的名字改成了完全不同的东西，与一个块没有任何关系，它仍然有效！！！。为什么？，怎么做？

我在 Angular 2 中创建了一个表组件，我在其中创建了一个公共表搜索过滤器管道，它工作正常，但未在其相应列中显示值。当我开始在文本框中输入搜索键时，过滤后的值会正确显示，但不在其相应的列下。抱歉，如果这个问题是重复的，我已经花了足够的时间在网上搜索，但我无法找到解决方案。

以下是供您参考的代码

组件.ts

管道.ts

组件.html

完整的工作Plunker，帮助我解决问题

我正在学习 Angular2，我想格式化一个添加千位逗号分隔符的数字。据我所知，这可以使用 Pipes 完成，问题是我想在 js 文件中而不是在 html 中以编程方式格式化数字（像 var | number 一样）。

首先，我意识到没有可以使用的 NumberPipe 独立管道（如果我错了，请纠正我），最相似的管道是 @angular2/common 中的 CurrencyPipe。所以我有这样的事情：

但它向我抛出了以下错误： 未处理的承诺拒绝：没有 CurrencyPipe 的提供者！; 区域：角;...

我究竟做错了什么？

提前致谢。

问候

我有一个纯管道，可以使用具有当前语言环境的TranslatePipe短语来翻译。我还启用了我的所有组件，包括. 现在，当有人更改语言时，我如何重新加载整个应用程序？（在observable中发出新值）。LocaleServicelocale$: Observable<string>ChangeDetectionStrategy.OnPushAppComponentlocale$

目前，我location.reload()在用户切换语言后使用。这很烦人，因为整个页面都被重新加载了。我怎样才能用纯管道和OnPush检测策略做到这一点？