AUSNAHME: Ein anderes unterstützendes Objekt 'test2' kann nicht in [items | gefunden werden async

Question

Während des Debuggens eines Anwendungsproblems habe ich unten die vereinfachte Komponente erstellt. Es wird die folgende Ausnahme, wenn sie ausgeführt:

ingredient2service.ts:24 ["test1", "test2"] 
angular2.dev.js:23093 EXCEPTION: Cannot find a differ supporting object 'test2' in [items | async in Ingredient2SearchComponent@5:12] 
angular2.dev.js:23083 ORIGINAL EXCEPTION: Cannot find a differ supporting object 'test2' 

Meine Vermutung sein im Zusammenhang mit dem Datenformat von rawSearch zurückgekehrt ist, aber ich habe nicht in der Lage gewesen, um herauszufinden, was ich falsch mache. Irgendwelche Vorschläge würden sehr geschätzt werden!

ingredient2search.component.ts

import {Component} from 'angular2/core'; 
import {Control} from 'angular2/common'; 
import {Ingredient2Service} from './ingredient2service'; 
import {Observable} from 'rxjs/Observable'; 

@Component({ 
    selector: 'ingredient-search', 
    providers: [Ingredient2Service], 
    template: ` 
    <div> 
     <h2>Ingredient2 Search</h2> 
     <input type="text" [ngFormControl]="term"/> 
     <ul> 
     <li *ngFor="#item of items | async">{{item}}</li> 
     </ul> 
    </div> 
    ` 
}) 
export class Ingredient2SearchComponent { 
    items: Observable<Array<string>>; 
    term = new Control(); 
    constructor(private ingredient2Service: Ingredient2Service) { 
    this.items = ingredient2Service.search(this.term.valueChanges); 
    } 
} 

ingredient2service.ts

import {Injectable} from 'angular2/core'; 
import {URLSearchParams, Http, HTTP_PROVIDERS} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 


@Injectable() 
export class Ingredient2Service { 
getData = []; 

    constructor(private http: Http) { } 
    search(terms: Observable<string>, debounceDuration = 400) { 
    return terms.debounceTime(debounceDuration) 
     .distinctUntilChanged() 
     .switchMap(term => this.rawSearch(term)); 
    } 

    rawSearch(term: string) { 
    var getData = new Array(); 
    this.getData = ["test1", "test2"]; 
    console.log(this.getData); 
    return this.getData; 
    } 
} 

Answer 1

In der Tat, sollten Sie den map Operator anstelle des switchMap eine innerhalb der search Methode, da die Verwendung rawSearch Methode gibt ein Array und keine beobachtbare:

Wenn die Methode rawSearch eine Observable zurückgibt, würde sie mit Ihrem Code funktionieren. Hier ist ein Beispiel mit einem rohen Observable:

rawSearch(term: string) { 
    var getData = new Array(); 
    this.getData = ["test1", "test2"]; 
    console.log(this.getData); 
    return Observable.create((observer) => { 
    observer.next(this.getData); 
    }); 
}