Угловая 2 - Труба не найдена

Question

Я пытаюсь использовать свою собственную трубку с массивом, который я присваиваю значениям в пределах подписки. Однако я получаю эту ошибку:

Unhandled Promise rejection: Template parse errors: 
The pipe 'summary' could not be found 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms' 
import { HttpModule } from '@angular/http' 
import { AppComponent } from './app.component'; 
import { UserComponent } from './components/user.component'; 
import { AboutComponent } from './components/about.component'; 
import { routing } from './app.routing'; 
import { SummaryPipe } from './pipes/summary.pipe' 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule, HttpModule, routing ], 
    declarations: [ AppComponent, UserComponent, AboutComponent, SummaryPipe ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

summary.pipe.ts

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

@Pipe({name: 'summary'}) 
export class SummaryPipe implements PipeTransform{ 
    transform(value: string, args: String[]){ 
     if(value) 
      return value.substring(0, 50) + "..."; 
    } 
} 

user.component.ts

import { Component } from '@angular/core'; 
import { PostsService } from '../services/posts.services'; 

@Component({ 
    moduleId: module.id, 
    selector: 'user', 
    templateUrl: 'user.component.html', 
    providers: [PostsService], 

}) 
export class UserComponent { 
    name: String; 
    email: string; 
    address: address; 
    hobbies: string[]; 
    showHobbies: boolean; 
    posts: Post[]; 

    constructor(private postsService: PostsService){ 
    this.name = 'John Doe'; 
    this.email = 'john@gmail.com'; 
    this.address = { 
     street: '12 Main st', 
     city: 'Boston', 
     state: 'MA' 
    } 
    this.hobbies = ['Music', 'Movies', 'Sports'] 
    this.showHobbies = false; 

    this.postsService.getPosts().subscribe(posts => { 
     this.posts = posts; 
    }) 

} 

    toggleHobbies(){ 
    if(this.showHobbies) 
    this.showHobbies = false; 
    else 
    this.showHobbies = true; 
} 

addHobby(hobby){ 
    this.hobbies.push(hobby); 
} 

deleteHobby(index){ 
    this.hobbies.splice(index, 1); 
} 
} 

interface address{ 
    street: string; 
    city: string; 
    state: string; 
} 

interface Post{ 
    id: number; 
    title: string; 
    body: string; 
} 

user.component.html

<h3>Posts</h3> 
    <div *ngFor="let post of posts"> 
     <h3>{{post.title }}</h3> 
     <p>{{post.body | summary}}</p> 
    </div> 

Я следовал документации, но я не могу заставить его работать. Есть идеи?

Answer 1

Объявление функции преобразования должно возвращать некоторое значение. В вашем случае строка.

И функция преобразования должна выглядеть так:

transform(value: string): string { 
    if(value){ 
     return value.substring(0, 50) + "..."; 
    } 
    return value; 
    }