Угловой - четкое изображение при нажатии

Основываясь на поиске в туториале по героям 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>

angular observable rxjs
person LozBlake15    schedule 28.08.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

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();
  }
person peinearydevelopment    schedule 28.08.2018
comment
Я думаю, this.searchTerms.next(''); - ключевое решение. Во «второй части» вы создаете новую тему и подписку каждый раз, когда вводимые данные очищаются, что я не считаю необходимым. - person Rich; 29.08.2018
comment
Я просто хочу очистить текст, который я ввел во входные данные, и список результатов UL, созданный в результате предыдущего поиска (как показано на первом рисунке). Если UL был привязан к простому идентификатору массива, просто очистите все элементы в массиве, но, поскольку это наблюдаемое, это невозможно. Я дам .next ('') попытку! - person LozBlake15; 29.08.2018
comment
Получилось удовольствие и так просто, спасибо. Просто быстрое наблюдение, когда это подключается к службе http, это вызовет дополнительный вызов сервера, или rxjs достаточно умен, чтобы справиться с этим - person LozBlake15; 29.08.2018
comment
Само по себе это вызовет еще один сервисный вызов, но вы просто обновите свой switchMap на что-то вроде следующего: switchMap((term: string) => { if (term) this.animalService.searchAnimals(term);}) для обработки этого сценария - person peinearydevelopment; 29.08.2018

arrow_upward
2
arrow_downward

когда ты делаешь

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

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

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

person Antoniossss    schedule 28.08.2018