Warum funktioniert es nicht asynchrone Rohrleitung?

Question

Es funktioniert nur 'rand1' string - sync, aber observer.next ('rand @ 2');

nicht funktionieren - async. wie es funktioniert?

Answer 1

Sie können versuchen, es auf diese Weise achive:

@Pipe({ 
    name: 'someRand', 
    pure: false 
}) 
export class RandomPipe implements PipeTransform { 
    constructor(private cdRef:ChangeDetectorRef) {} 

    pipe: AsyncPipe; 
    obs: Observable<string>; 

    transform(value:string):any { 
    if (!this.pipe) { 
     this.pipe = new AsyncPipe(this.cdRef); 
     this.obs = new Observable<string>(observer=>{ 
     observer.next('rand1'); 
     setTimeout(()=>{ 
      observer.next('rand@2'); 
     }, 500) 
     }); 
    } 

    return this.pipe.transform(this.obs); 
    } 
} 

Siehe auch Plunker Example

Answer 2

Sie brauchen nicht AsyncPipe hier

@Pipe({ 
    name: 'trans', 
    pure: false 
}) 
export class RandomPipe implements PipeTransform { 
    constructor(private cdRef:ChangeDetectorRef) { 
    } 

    transform(value:string):any { 
    return new Observable<string>(observer=>{ 
     observer.next('rand1'); 
     setTimeout(()=>{ 
     observer.next('rand@2'); 
     }) 
    })); 
    } 
} 

und dann von der Asynchron-Rohr verwenden wie

{{someValue | trans | async }}