Угловая - Ясная наблюдаемая при клике - PullRequest
Новая
       8

Угловая - Ясная наблюдаемая при клике

0 голосов
/ 28 августа 2018

Основываясь на поиске в туре учебника героев angular.io, я создал простой поиск животных с использованием наблюдаемого. Все работает нормально, однако теперь я хотел бы очистить значения в поиске и очистить список результатов при выборе результата.

Изображение поиска

Изображение поиска после клика

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

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

Спасибо, вот мой код. 

import { Component, OnInit } from '@angular/core';

import {Observable, Subject} from 'rxjs'

import {
  debounceTime, distinctUntilChanged, switchMap
} from 'rxjs/operators';

import { AnimalService } from '../services/animal.service';
import { Animal } from '../models/animal';

@Component({
  selector: 'app-animal-search',
  templateUrl: './animal-search.component.html',
  styleUrls: ['./animal-search.component.css']
})
export class AnimalSearchComponent implements OnInit {
  animals$: Observable<Animal[]>;
  private searchTerms = new Subject<string>();
  private searchTerm: string;

  constructor(private animalService: AnimalService) { }

  search(term: string):void {
    this.searchTerms.next(term);
  }

  ngOnInit() {
    this.animals$ = this.searchTerms.pipe(

      debounceTime(300),

      distinctUntilChanged(),

      switchMap((term: string) => this.animalService.searchAnimals(term)),
    );

    this.animals$.subscribe( )
  }

  clearSearch()
  {
    //PART THAT ISNT WORKING
    this.searchTerm = "";
    this.searchTerms = new Subject<string>();
  }

}

<div id="search-component" class="search-component-container">
  <input #searchBox id="search-box" [(ngModel)]="searchTerm"  (keyup)="search(searchBox.value)" class="search-component-input" />

  <ul class="search-result">
    <li *ngFor="let animal of animals$ | async" >
      <a routerLink="/animal/{{animal.id}}" (click)="clearSearch()"> 
        {{animal.Name}}
      </a>
    </li>
  </ul>
</div>

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

когда вы делаете

this.searchTerms = new Subject<string>();

вы теряете тему, для которой настроили канал в onInit, так как это совершенно новый экземпляр темы.

Вы можете просто выдать следующее значение, чтобы очистить его, используя subject.next

0 голосов
/ 29 августа 2018

Не знаю точно, чего вы пытаетесь достичь, но, исходя из вашего вопроса, может показаться, что вы захотите сделать следующее: 

clearSearch()
{
  this.searchTerms.next('');
}

В зависимости от желаемого результата, вы также можете сделать следующее: 

  initAnimals() {
    if (this.animals$) {
      this.animals.unsubscribe();
    }

    this.animals$ = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term: string) => this.animalService.searchAnimals(term)),
    );

    this.animals$.subscribe( )
  }

  ngOnInit() {
    this.initAnimals();
  }

  clearSearch() {
    this.initAnimals();
  }
...