Angular 6: вызов функции в HTML-интерполяции возвращает неопределенное значение

Question

Я пытаюсь вызвать функцию внутри моей HTML-интерполяции, вот так.Этот фрагмент HTML находится внутри цикла *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

Похоже, ваша функция ничего не возвращает.Убедитесь, что функция вызывается (введите console.log, чтобы увидеть, выполняется ли она на самом деле).

Однако, возможно, было бы лучше что-то вроде этого.

<h2>{{ unit.daysRemaining + ' Days' }}</h2>

Если этоработает, может быть, проблема была в опечатке, или какая-то область видимости, которую вам там не хватает (это шаблон шаблона компонента?)

Answer 2

Это может быть отличной возможностью использовать трубу вместо функции.Это помогает избежать вызова функции в пределах *ngFor, что может отрицательно сказаться на производительности.Из документации, окружающей трубы и обнаружение изменений .

Angular выбирает более простой и быстрый алгоритм обнаружения изменений при использовании трубы.

Angular имеетвстроенный канал, I18nPluralPipe , который «отображает значение в строку, которая множит значение в соответствии с правилами локали.».Вы создаете объект (множественную карту), нацеленный на определенные числовые значения, и указываете, что в результирующей строке должно быть разрешено сказать 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.

Pipe:

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);
  }
}

Вот пример в действии.

Надеемсяэто помогает!