Question

基于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>

Answer 1

什么时候做

BindProperty

您正在丢失已在onInit中为其配置管道的主题，因为这是全新的主题实例。

您可以只发出下一个值以使用subject.next清除它

Answer 2

不确定要实现的目标，但是根据您的问题，您似乎需要执行以下操作：

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();
  }

角度-清除可观察的点击

2 个答案: