очистить наблюдаемый ввод в angular 8

Question

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

template:

<div>
    <h1>Country Search</h1>
    <div id="search-bar">
        <input #searchBox id="search-box" (input)="search(searchBox.value)" />
        <button (click)="delete(search-box.value)">Cancel</button>
        <ul class="search-result">
            <li *ngFor="let country of countries$ | async" >
              <a routerLink="/country-details/{{ country.name }}">{{ country.name }}</a>
            </li>
        </ul>
    </div>
</div>

typescript

import { Component, OnInit } from '@angular/core';
import { Country } from '../../interfaces/country';
import { CountrySearchService } from '../../services/country-search.service';
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css']
})
export class SearchBarComponent implements OnInit {

  selectedcountry: Country;

  constructor(private countryService: CountrySearchService) { }
  
  countries$: Observable<Country[]>;
  private searchString = new Subject<string>();
  search(term: string): void {
    this.searchString.next(term);
  }

  delete(string: String) {  
    string = '';  
    console.log(string);
  }

  ngOnInit() {
    this.countries$ = this.searchString.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term: string) => this.countryService.searchCountries(term)),
    );
  }
}

Answer 1

Вы можете сделать что-то вроде (непроверено):

export class SearchBarComponent implements OnInit {

  selectedcountry: Country;

  constructor(private countryService: CountrySearchService) { }
  
  countries$: Observable<Country[]>;
  private searchInput$ = new Subject<string>();
  private searchClear$ = new Subject<any>();
  search(term: string): void {
    this.searchInput$.next(term);
  }

  delete(string: String) {  
    this.searchClear$.next();
  }

  ngOnInit() {
      const search$ = merge(
          this.searchClear$.pipe(mapTo(')),
          this.searchInput$.pipe(
              debounceTime(300)
          )
      );
    this.countries$ = search$.pipe(
      distinctUntilChanged(),
      switchMap((term: string) => this.countryService.searchCountries(term)),
    );
  }
}

merge берет самый последний результат из любого наблюдаемого и сворачивает его в один. mapTo в основном то же самое, что map(() => '').