角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

変換関数declerationは、ある値を返さなければなりません。あなたの場合の文字列で。

そして、変換関数は、次のようになります。

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