Подписка на Observable в сервисе из компонента

Я довольно долго пытался понять, как подписаться на массив, значения которого постоянно обновляются.

Мне нужно понять, как правильно настроить наблюдаемую службу Angular 2+ и правильно подписаться на нее в моем компоненте. Предположим, что все остальные части кода работают правильно.

@Injectable()
export class AutocompleteService {

    searchTerm: string;
    results = [];
    observe$ = Observable.from(this.results);

    searchTest(term){
        this.searchTerm = term.toLowerCase();

        if(this.searchTerm.length > 2){
            this.recruiters.forEach(function(el){
                if(el.name.toLowerCase().indexOf(term) != -1) {
                    this.results.push(el);
                }   
            });    

        }
    }

    getCurrentResults():Observable<Object> {
        return this.observe$;
    }

В сервисе все работает как положено. Если я регистрирую term, я получаю пользовательский ввод от моего компонента. Или массив results после сопоставления результатов поиска помещается в него.

@Component({
    selector: 'autocomplete',
    templateUrl: './autocomplete.component.html',
    providers: [AutocompleteService]
})
export class AutocompleteComponent implements OnInit{
    constructor(private autocompleteService: AutocompleteService){}

    value: string = '';
    searchControl = new FormControl();

    // fired when input happens
    getResults(event){
        this.autocompleteService.searchTest(event.target.value);

        this.autocompleteService.getCurrentResults().subscribe(
            value => console.log(value)
        );

    }

Я настроил наблюдаемый шаблон в меру своих возможностей, но ничего не получаю из .subscribe в getResults


angular observable angular2-observables angular2-services
person Ben Racicot    schedule 30.03.2017    source источник
comment
что вы хотите знать и в чем ваша проблема, с этой строкой неясно - мне нужно понять, как правильно настроить наблюдаемый сервис Angular 2+ и правильно подписаться на него в моем компоненте.   -  person Rahul Singh    schedule 30.03.2017
comment
Спасибо @RahulSingh. Я настроил наблюдаемый шаблон, поскольку я научился в меру своих возможностей, но я ничего не получаю из .subscribe в getResults.   -  person Ben Racicot    schedule 30.03.2017

Ответы (2)


arrow_upward
5
arrow_downward

В дополнение к тому, что jonrsharpe и эхонакс сказал:

вы можете использовать тему:

@Injectable()
export class AutocompleteService {

    searchTerm: string;
    results = [];
    subject = new Subject();

    searchTest(term){
        this.searchTerm = term.toLowerCase();

        if(this.searchTerm.length > 2){
            this.recruiters.forEach(el =>{
                if(el.name.toLowerCase().indexOf(term) != -1) {
                    this.subject.next(el);
                }   
            });    

        }
    }

    getCurrentResults():Subject<Object> {
        return this.subject;
    }

}

и подпишитесь на getCurrentResults() так же, как и вы.

ваша демонстрация: plunker

person El houcine bougarfaoui    schedule 30.03.2017

arrow_upward
5
arrow_downward

В вашем коде много ошибок

  1. В вашем сервисе нет поля this.recruiters

  2. this.results.push(el); ничего не будет подталкивать к результатам, потому что вы используете forEach(function(el){, это должно было быть forEach((el)=>, чтобы ваш this внутри области действия относился к вашей службе.

Пример плунжера: http://plnkr.co/edit/5L0dE7ZNgpJSK4AbK0oM?p=preview

person eko    schedule 30.03.2017