javascript - Angular 6 : Function call within HTML interpolation returns undefined

Question

我正在尝试在 HTML 插值中调用一个函数，如下所示。该 HTML block 位于 *ngFor 内环形。

<mat-list>
    <mat-list-item *ngFor="let unit of units">
    <div>
        <p>Remaining Life</p>
        <h2>{{ parseTimeRemaining(unit.daysRemaining) }}</h2>
    </div>
    </mat-list-item>
<mat-list>

parseTimeRemaining()返回要显示的字符串，使用 unit.daysRemaining 的值作为参数。

public parseTimeRemaining(days: number){
    const timeString = days + " Days";
    return timeString;
}

目前，我的函数返回 undefined因此，一个空的<h2>元素。我做错什么了吗？如果是这样，显示我需要的信息的最佳方式是什么？

Answer 1

这可能是使用 Pipe 而不是函数的绝佳机会。这有助于避免调用 *ngFor 中的函数，这可能会对性能产生不利影响。来自围绕 pipes and change detection 的文档.

Angular picks a simpler, faster change detection algorithm when you use a pipe.

Angular 有一个内置管道，I18nPluralPipe其中“将值映射到根据区域设置规则将该值复数化的字符串。”。您创建一个针对特定数值的对象 (pluralMap)，并指示结果字符串应允许表示 0 Days、1 Day 或 99 days.

pluralMap = {
  '=0': '0 Days',
  '=1': '1 Day',
  'other': '# Days'
};

您可以在模板中使用它，如下所示:

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

另一种方法是创建 Custom Pipe 。这将允许您根据提供的 daysRemaining 实现自定义格式和/或验证逻辑。

管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'daysRemaining'})
export class DaysRemainingPipe implements PipeTransform {
  transform(days: number): string {
    const timeString = days + " Days";
    return timeString;
  }
}

模块(注册):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component';
import { DaysRemainingPipe } from './days-remaining.pipe';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, DaysRemainingPipe ]
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

模板:

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

更进一步，我们可以扩展 I18nPluralPipe通过扩展内置管道来使我们的自定义管道中的结果复数，并可能检查输入是否是有效数字。

import { Pipe, PipeTransform } from '@angular/core';
import { I18nPluralPipe } from '@angular/common';

@Pipe({name: 'daysRemaining'})
export class DaysRemainingPipe extends I18nPluralPipe implements PipeTransform {
  transform(days: number): string {
    const safeDays = isNaN(days) ? 0 : days;

    const pluralMap = {
      '=0': '0 Days',
      '=1': '1 Day',
      'other': '# Days'
    };

    return super.transform(safeDays, pluralMap);
  }
}

这是一个example行动中。

希望有帮助!