2017-12-28 14 views
0

im folgenden Code, die in Winkel Material Beispiele: https://stackblitz.com/angular/gorglnbmork?file=app%2Fautocomplete-display-example.tsArgument des Typs 'string | Benutzer ist nicht zuordenbar Parameter des Typs 'string'

ngOnInit() { 
    this.filteredOptions = this.myControl.valueChanges 
     .pipe(
     startWith({} as User), 
     map(user => user && typeof user === 'object' ? user.name : user), 
     map(name => name ? this.filter(name) : this.options.slice()) 
    ); 
    } 

Ich habe folgende Fehler auf this.filter (Name): Argument gib 'string | Benutzer 'ist keinem Parameter vom Typ' String 'zuweisbar.

warum? Was kann getan werden, um es zu vermeiden?

hinzugefügt zu diesem Beitrag nach:

korrigierte ich den Fehler durch die folgende Änderung des Filters auf die Parameter zu tun:

filter(name: string | User): User[] { 
    return this.options.filter(option => 
     option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); 
} 

aber ich weiß nicht, was string | User mean und danach gibt es ein Problem bei name.toLowerCase() als String | Benutzer hat keine Methode toLowerCase()

Vielen Dank für Ihre Bewertungen!

+2

Hat sonst jemand bemerkt, dass die verlinkte Seite, auf der die eckige IDE gehostet wird, darauf reagiert? –

Antwort

0

Ihre Benutzer haben den Typ Benutzer, der keine Zeichenfolge ist. Das Problem ist in Ihrem

displayFn(user: User): string { 
    return user ? user.name : user.name; 
    } 

Sie die zurückgegebene Wert wollen Benutzer als Typ, aber im Fall von „! User“ Sie Benutzer zurück, die vom Typ Benutzer und nicht Zeichenfolge ist. So können Sie den Typ Ihrer Funktion als Zeichenfolge | angeben Benutzer oder versuchen Sie, immer eine Zeichenfolge zurückzugeben.

+0

Die betreffende Zeile ist this.filter (Name) und nicht displayFn. –

+0

Ich habe den Fehler korrigiert, indem ich folgende Änderung am Filterparameter vorgenommen habe: –

+0

Filter (Name: Zeichenfolge | Benutzer): Benutzer [] { Rückgabe this.options.filter (Option => option.name.toLowerCase(). indexOf (name.toLowerCase()) === 0); } –

0

Ich weiß nicht, welche Zeichenfolge | Benutzermittel [s].

Dies wird als Union Types in Typoskript bekannt:

Ein Union-Typ beschreibt einen Wert, der einer von mehreren Typen sein kann. Wir verwenden den vertikalen Balken (|), um jeden Typ zu trennen.

Danach gibt es ein Problem auf name.toLowerCase().

Also, in Ihrem Beispiel, das sagt einfach, dass name entweder ein string oder ein User sein könnte. Wie Sie richtig gesagt haben, beschwert sich TypeScript, da name ein User sein kann, wird es nicht immer eine toLowerCase Funktion haben.

Um TypeScript glücklich zu machen, können Sie je nach Typ unterschiedliche Codes verwenden. Hier ist ein Beispiel:

filter(name: string | User): User[] { 
    return this.options.filter(option => { 
     if (name instanceof User) { 
      return name === option; 
     } 

     return option.name.toLowerCase().indexOf(name.toLowerCase()) === 0; 
    }); 
} 

Der Schlüssel zu diesem Beispiel ist die Verwendung von instanceof. Wir haben festgestellt, dass user entweder string oder User sein kann, also überprüfen wir zuerst, ob es tatsächlich User ist. Wenn ja, können wir die Optionen anhand des tatsächlichen User filtern, wie ich gezeigt habe. Ansonsten (d. H.Wenn es nicht ein User ist, die in) ist es muss ein string sein, so können wir einfach toLowerCase wie vorher anrufen.

Verwandte Themen