Verwenden von benutzerdefinierten Rohr und async Rohr zusammen

Question

In meinem Projekt habe ich eine benutzerdefinierte Rohr eine Liste zu filtern:

@Pipe({name: 'filterList'}) 
export class FilterListPipe implements PipeTransform { 
    transform(value: string[], arg: string[]): any { 
    if (!value) return value; 
    return value.filter(el => !arg.includes(el)); 
    } 
} 

Ich verwende dieses Rohr wie folgt:

<md-select placeholder="Grupos" (change)="changeGroup($event)"> 
    <md-option 
    *ngFor="let group of (allGroups | async) | filterList : (userDetail | async)?.groups" 
    [value]="group"> 
    {{ group }} 
    </md-option> 
</md-select> 

Das Problem ist, ich einen Fehler in der FilterListPipe angehoben erhalten:

Arg- ist null

So ist dies nicht funktioniert:

let group of (allGroups | async) | filterList : (userDetail | async)?.groups 

Kann ich irgendwie das Ergebnis async verwenden, um als Argument meiner benutzerdefinierten Rohr übergeben werden? Oder sollte ich das Observable in meiner Klasse abonnieren und eine andere Klassenvariable erstellen?

Answer 1

löste ich mein Problem:

musste ich mein benutzerdefiniertes Rohr vor dem Asynchron-Rohr setzen. Wie folgt aus:

*ngFor="let group of allGroups | filterList : (userDetail | async)?.groups | async" 

und nun der Wert des ersten Arguments in TRANFORM Funktion ist eine beobachtbare, so:

@Pipe({name: 'filterList'}) 
export class FilterListPipe implements PipeTransform { 
    transform(value: Observable<any>, arg: string[]): any { 
     return value 
      .map(groups => groups.filter(el=> !arg.includes(el))); 
    } 
}