Угловая труба 5 не работает - PullRequest
Новая
       19

Угловая труба 5 не работает

0 голосов
/ 01 мая 2018

Я создал угловой Pipe с именем trim. Этот канал предназначен для удаления последнего символа из строки. Вот моя труба класса TrimPipe. Консоль не регистрирует значения, когда канал используется внутри HTML. Использование HTML здесь - 

<ng-container *ngFor="let bg of backgrounds.preferred">
       <span>{{bg.name ? (bg.name + ', ') : '' | trim}}</span>
   </ng-container>

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

@Pipe({
  name: 'trim'
})
export class TrimPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log(value, args, 'Pipes');
    return value.toString().substring(0, value.length - 1);
  }

}

Мой app.module.ts файл - 

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

// Custom
import {AppComponent} from './app.component';
import {CommonService} from './shared/services/common.service';
import {DirectivesModule} from './shared/directives/directives.module';
import {PipeModule} from './shared/pipe/pipe.module';]


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DirectivesModule,
    PipeModule,
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    NgSelectModule,
    FormsModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Мой pipe.module.ts - 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TrimPipe } from './trim.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [TrimPipe],
  exports: [TrimPipe]
})
export class PipeModule { }

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Вот действительно консервативная версия, которая должна отлавливать любые ошибки. 

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

@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
  transform(inValue: any): string {
    let value = '';
    try {
      value = inValue.toString();
      console.log('TrimPipe: >>' + value + '<<');
      return value.substring(0, value.length - 1);
    } catch (err) {
      console.log(err);
      return value;
    }
  }
}

В целом ваш код выглядит так, как будто он идет в нужное место, но я вижу несколько проблем:

  1. Преобразование всегда должно возвращать строку
  2. Это может быть хорошей идеей, чтобы попробовать / поймать внутренности, так что у вас есть шанс увидеть любые ошибки.

Я нахожу для вещей более низкого уровня, которые будут использоваться в случайных местах, что было бы неплохо написать их "в обороне", чтобы выжить во всем, что может быть брошено в них.

0 голосов
/ 01 мая 2018

Вы используете канал только для пустой строки, когда bg.name ложно. Исправить, перемещая скобки: 

<span>{{(bg.name ? bg.name + ', ' : '') | trim}}</span>

Кстати, вы получите выигрыш в производительности, если переместите всю логику в канал или предварительно отформатируете строку перед передачей ее в шаблон (т. Е. В коде компонента или службы). Angular выполняет все вычисления в шаблонных интерполяциях при каждом цикле обнаружения изменений, в то время как чистые каналы кэшируются до тех пор, пока не изменится входное значение.

...