Question

我正在创建一个自定义管道，它将给定的数字转换为几天和几小时。进入其中的HTML看起来像这样：

<div *ngFor="let unit of units">
   <p>Remaining Life</p>
   <h2>{{ unit.daysRemaining | timeRemaining }}</h2>
</div>

最初，我有一个unit对象存在于组件内部。管道正确翻译了数字as seen in this StackBlitz。

但是，我想使用服务来加载它。当我这样做时，值变成undefined（我将其设置为在管道中显示为0）。 This StackBlitz shows the result.

两者之间有什么区别？从服务加载数据时为什么会显示undefined值？

Answer 1

问题：

在您的服务中，您创建了一个对象数组，每个对象都拥有hoursRemaining属性，但是在您的app.component.html中，您正在尝试访问daysRemaining属性，该属性未定义，因为它是没有在对象中声明。

解决方案：

在hoursRemaining中更改访问权限app.component.html。

<hello name="{{ name }}"></hello>
<div>
    <div>Custom Pipe:</div>
    <ul>
        <li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>
    </ul>
</div>

固定示例为here。

Answer 2

您已经：

<li *ngFor="let unit of units">{{ unit.daysRemaining | daysRemaining }}</li>

但应为：

<li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>

在app.component.html中的第二次堆叠闪电战中

Answer 3

解决方案：

只需在模板中使用hoursRemaining而不是daysRemaining，它将起作用

提示

<li *ngFor="let unit of units">{{ unit | json }}</li>是一种简单的调试方法-您可以查看传递到管道的内容。

Answer 4

通过此更改，您的代码可以正常工作：

<li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>

角度6：如果数据来自服务，则自定义管道返回NaN

4 个答案: