Angular - Hapus Dapat Diamati saat Klik

Berdasarkan pencarian di tutorial tur pahlawan sudut.io, saya telah membuat pencarian hewan sederhana menggunakan observasi. Semuanya berfungsi dengan baik, namun sekarang saya ingin menghapus nilai dalam pencarian, dan menghapus daftar hasil, ketika saya memilih hasil.

Saya telah membuat metode untuk menghapus nilai input saat mengklik tautan, berharap observasi akan diperbarui dan dihapus, sayangnya hal itu tidak terjadi, dan daftar drop-down tetap ada. Saya sudah mencoba menugaskan ulang yang dapat diamati, yang berfungsi, tetapi kemudian yang dapat diamati berhenti berlangganan, sesuatu yang tidak ingin saya lakukan.

Saya yakin ini adalah kasus dimana saya belum sepenuhnya memahami cara bekerja dengan observasi, jadi saya berharap kalian bisa membantu saya.

Terima kasih, ini kode saya.

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 sumber

Jawaban (2)


arrow_upward
5
arrow_downward

Tidak yakin persis apa yang ingin Anda capai, tetapi berdasarkan pertanyaan Anda, sepertinya Anda ingin melakukan hal berikut:

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

Bergantung pada hasil yang Anda inginkan, Anda juga dapat melakukan hal berikut:

  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
Saya pikir this.searchTerms.next(''); adalah solusi utama. Di 'bagian kedua' Anda membuat Subjek dan langganan baru setiap kali input dihapus, yang menurut saya tidak perlu. - person Rich; 29.08.2018
comment
Saya hanya ingin menghapus teks yang saya ketikkan ke dalam input, dan daftar hasil UL yang dibuat oleh pencarian sebelumnya (seperti yang ditunjukkan pada gambar pertama). Jika UL terikat ke id array sederhana, hapus saja semua item dalam array, tetapi karena itu dapat diamati, itu tidak mungkin. Saya akan mencoba .next('')! - person LozBlake15; 29.08.2018
comment
Berhasil dan sangat sederhana, terima kasih. Sekadar tindak lanjut singkat, ketika ini terhubung ke layanan http, apakah ini akan menyebabkan panggilan server tambahan, atau apakah rxjs cukup pintar untuk mengatasinya? - person LozBlake15; 29.08.2018
comment
Dengan sendirinya, ini akan memicu panggilan layanan lain, tetapi Anda cukup memperbarui switchMap Anda menjadi seperti berikut: switchMap((term: string) => { if (term) this.animalService.searchAnimals(term);}) untuk menangani skenario itu - person peinearydevelopment; 29.08.2018

arrow_upward
2
arrow_downward

saat kamu melakukan

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

Anda kehilangan subjek yang telah Anda konfigurasikan pipanya di onInit, karena ini adalah contoh subjek baru.

Anda cukup memancarkan nilai berikutnya untuk menghapusnya menggunakan subjek.berikutnya

person Antoniossss    schedule 28.08.2018