英雄之旅搜索組件

我想在Tour of Heroes的角度2的搜索組件中添加一個div，因此，當搜索組件解析請求時，會出現三個點。而且，一旦觀察結果被解析，結果就會顯示出來，或者如果沒有結果出現，就會顯示如Not found這樣的信息。英雄之旅搜索組件

到目前爲止，我有這樣的：

<div id="search-component"> 
    <h4>Hero Search</h4> 
    <input #searchBox id="search-box" (keyup)="search(searchBox.value)" /> 
    <div> 
    <div *ngIf="searchBox.value.length > 0 && !(heroes | async)" >...</div> 
    <div *ngFor="let hero of heroes | async" 
     (click)="gotoDetail(hero)" class="search-result" > 
     {{hero.name}} 
    </div> 
    </div> 
</div>

如果你能看到，我添加了下面的div

<div *ngIf="searchBox.value.length > 0 && !(teams | async)" >...</div>

試圖讓三個點出現時，搜索框是不空着，當隊伍尚未解決時。

但是它不能很好地工作，因爲如果我嘗試搜索某個東西，同時請求完成，我可以看到三個點，但是一旦解決了，如果我刪除了一些字母並再試一次，三個點不再出現。

這是控制器，它是完全一樣的一個，你可以在英雄的你找到（https://angular.io/docs/ts/latest/tutorial/toh-pt6.html）

import { Component, OnInit } from '@angular/core'; 
import { Router }   from '@angular/router'; 
import { Observable }  from 'rxjs/Observable'; 
import { Subject }   from 'rxjs/Subject'; 
import { HeroSearchService } from './hero-search.service'; 
import { Hero } from './hero'; 
@Component({ 
    moduleId: module.id, 
    selector: 'hero-search', 
    templateUrl: 'hero-search.component.html', 
    styleUrls: [ 'hero-search.component.css' ], 
    providers: [HeroSearchService] 
}) 
export class HeroSearchComponent implements OnInit { 
    heroes: Observable<Hero[]>; 
    private searchTerms = new Subject<string>(); 
    constructor(
    private heroSearchService: HeroSearchService, 
    private router: Router) {} 
    // Push a search term into the observable stream. 
    search(term: string): void { 
    this.searchTerms.next(term); 
    } 
    ngOnInit(): void { 
    this.heroes = this.searchTerms 
     .debounceTime(300)  // wait for 300ms pause in events 
     .distinctUntilChanged() // ignore if next search term is same as previous 
     .switchMap(term => term // switch to new observable each time 
     // return the http search observable 
     ? this.heroSearchService.search(term) 
     // or the observable of empty heroes if no search term 
     : Observable.of<Hero[]>([])) 
     .catch(error => { 
     // TODO: real error handling 
     console.log(error); 
     return Observable.of<Hero[]>([]); 
     }); 
    } 
    gotoDetail(hero: Hero): void { 
    let link = ['/detail', hero.id]; 
    this.router.navigate(link); 
    } 
}

你知不知道我怎樣才能改善這種狀況？

來源

2016-11-17 Manuelarte

你應該分享您的組件的代碼以及 –

嗨，編輯和共享，這與你在英雄之旅中可以找到的相同https://angular.io/docs/ts/latest/tutorial/toh-pt6.html – Manuelarte

只要我可以，任何地方都沒有「團隊」見 –

在你的病情：

<div *ngIf="searchBox.value.length > 0 && !(heroes | async)" >...</div>

，當搜索到任何結果，你空數組。
但英雄空數組返回true

所以，你可以設定英雄null或undefined
或檢查長度代替，所以儘量

<div *ngIf="searchBox.value.length > 0 && !((heroes&& heroes.length>0) | async)" >...</div>

來源

2016-11-17 10:17:54

那麼...我應該寫這個條件嗎

...

因爲我已經試過了，它不起作用，因爲可能英雄沒有定義在那一刻。我也試過英雄？。長度，它既不工作 – Manuelarte

嘗試'（英雄&&英雄。長度> 0）'，給一些trys :) –

@Manuelarte我希望你得到它的工作？ –

英雄之旅搜索組件

回答

相關問題