Angular 5入門 10: HTTPサービスでリモートのデータを検索する

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';
import {catchError, map, tap} from 'rxjs/operators';
import {Heroine} from './heroine';
import {MessageService} from './message.service';
const httpOptions = {
	headers: new HttpHeaders({'Content-Type': 'application/json'})
};
@Injectable()
export class HeroineService {
	private heroinesUrl = 'api/heroines';
	constructor(
		private http: HttpClient,
		private messageService: MessageService) {}
	getHeroines(): Observable<Heroine[]> {
		return this.http.get<Heroine[]>(this.heroinesUrl)
		.pipe(
			tap(heroines => this.log('データを取得')),
			catchError(this.handleError('getHeroines', []))
		);
	}
	getHeroine(id: number): Observable<Heroine> {
		const url = `${this.heroinesUrl}/${id}`;
		return this.http.get<Heroine>(url)
		.pipe(
			tap(_ => this.log(`番号${id}のデータを取得`)),
			catchError(this.handleError<Heroine>(`getHeroine 番号=${id}`))
		);
	}
	searchHeroines(term: string): Observable<Heroine[]> {
		if (!term.trim()) {
			return of([]);
		}
		const url = `${this.heroinesUrl}/?name=${term}`;
		return this.http.get<Heroine[]>(url)
		.pipe(
			tap(_ => this.log(`「${term}」のデータを検索`)),
			catchError(this.handleError<Heroine[]>('searchHeroines', []))
		);
	}
	addHeroine(heroine: Heroine, numHeroines: number): Observable<Heroine> {
		let heroineOvserbable;
		if (numHeroines === 0) {
			heroine.id = 11;
			heroineOvserbable = this.http.put(this.heroinesUrl, heroine, httpOptions)
		} else {
			heroineOvserbable = this.http.post<Heroine>(this.heroinesUrl, heroine, httpOptions);
		}
		return heroineOvserbable
		.pipe(
			tap((heroine: Heroine) => this.log(`番号${heroine.id}にデータを追加`)),
			catchError(this.handleError<Heroine>('addHeroine'))
		);
	}
	deleteHeroine (heroine: Heroine | number): Observable<Heroine> {
		const id = typeof heroine === 'number' ? heroine : heroine.id;
		const url = `${this.heroinesUrl}/${id}`;
		return this.http.delete<Heroine>(url, httpOptions)
		.pipe(
			tap(_ => this.log(`番号${id}のデータを削除`)),
			catchError(this.handleError<Heroine>('deleteHeroine'))
		);
	}
	updateHeroine(heroine: Heroine): Observable<any> {
		return this.http.put(this.heroinesUrl, heroine, httpOptions)
		.pipe(
			tap(_ => this.log(`番号${heroine.id}のデータを変更`)),
			catchError(this.handleError<any>('updateHeroine'))
		);
	}
	private handleError<T> (operation = 'operation', result?: T) {
		return (error: any): Observable<T> => {
			console.error(error);
			this.log(`${operation} failed: ${error.message}`);
			return of(result as T);
		};
	}
	private log(message: string) {
		this.messageService.add('HeroineService: ' + message);
	}
}

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {of} from 'rxjs/observable/of';
import {
	debounceTime, distinctUntilChanged, switchMap
} from 'rxjs/operators'; 
import {Heroine} from '../heroine';
import {HeroineService} from '../heroine.service';
@Component({
	selector: 'app-heroine-search',
	templateUrl: './heroine-search.component.html',
	styleUrls: ['./heroine-search.component.css']
})
export class HeroineSearchComponent implements OnInit {
	heroines$: Observable<Heroine[]>;
	private searchTerms = new Subject<string>();
	constructor(private heroineService: HeroineService) {}
	search(term: string): void {
		this.searchTerms.next(term);
	}
	ngOnInit(): void {
		this.heroines$ = this.searchTerms
		.pipe(
			debounceTime(300),
			distinctUntilChanged(),
			switchMap((term: string) => this.heroineService.searchHeroines(term)),
		);
	}
}

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';
import {InMemoryDataService}  from './in-memory-data.service';
import {AppComponent} from './app.component';
import {HeroinesComponent} from './heroines/heroines.component';
import {HeroineDetailComponent} from './heroine-detail/heroine-detail.component';
import {HeroineService} from './heroine.service';
import {MessagesComponent} from './messages/messages.component';
import {MessageService} from './message.service';
import {AppRoutingModule} from './app-routing.module';
import {DashboardComponent} from './dashboard/dashboard.component';
import {HeroineSearchComponent} from './heroine-search/heroine-search.component';
@NgModule({
	declarations: [
		AppComponent,
		HeroinesComponent,
		HeroineDetailComponent,
		MessagesComponent,
		DashboardComponent,
		HeroineSearchComponent
	],
	imports: [
		BrowserModule,
		FormsModule,
		AppRoutingModule,
		HttpClientModule,
		HttpClientInMemoryWebApiModule.forRoot(
			InMemoryDataService, {dataEncapsulation: false}
		)
	  ],
	providers: [HeroineService, MessageService],
	bootstrap: [AppComponent]
})
export class AppModule {}

<div id="search-component">
	<h4>ヒロイン検索</h4>
	<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />  
	<ul class="search-result">
		<li *ngFor="let heroine of heroines$ | async" >
			<a routerLink="/detail/{{heroine.id}}">
				{{heroine.name}}
			</a>
		</li>
	</ul>
</div>

.search-result li {
	border-bottom: 1px solid gray;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	width:195px;
	height: 16px;
	padding: 5px;
	background-color: white;
	cursor: pointer;
	list-style-type: none;
}
.search-result li:hover {
	background-color: #607D8B;
}
.search-result li a {
	color: #888;
	display: block;
	text-decoration: none;
}
.search-result li a:hover {
	color: white;
}
.search-result li a:active {
	color: white;
}
#search-box {
	width: 200px;
	height: 20px;
}
ul.search-result {
	margin-top: 0;
	padding-left: 0;
}

<h3>トップヒロイン</h3>
<div class="grid grid-pad">
	<a *ngFor="let heroine of heroines" class="col-1-4"
		routerLink="/detail/{{heroine.id}}">
			<div class="module heroine">
			<h4>{{heroine.name}}</h4>
		</div>
	</a>
</div>
<app-heroine-search></app-heroine-search>