角度2材質自動完成組件不顯示項目

我正在嘗試開發具有角度材質的自動完成示例。我已經完成了幾個樣本並且工作正常，但是這次列表並沒有顯示如下面截圖所示的內容。角度2材質自動完成組件不顯示項目

有列表中的項目，但它不顯示，當我選擇組件內部的項目也是空的。這裏是我的代碼：

網站類別：

export class Sites { 
    siteID:number; 
    siteURL:string; 
    constructor(siteID:number, siteURL:string) 
    { 
     this.siteID = siteID; 
     this.siteURL = siteURL; 
    } 
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { FormsModule, ReactiveFormsModule,FormControl } from '@angular/forms'; 
import {MdInputModule,MdAutocompleteModule} from '@angular/material'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { MaterialModule } from '@angular/material'; 
import 'hammerjs'; 

import { AppComponent } from './app.component'; 
import { SiteAutoCompleteComponent } from './site-auto-complete/site-auto-complete.component'; 
import { SpWebApiService } from './sp-web-api.service'; 
import { ConfigService } from './utils/config.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    SiteAutoCompleteComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    ReactiveFormsModule, 
    BrowserAnimationsModule,MdInputModule,MdAutocompleteModule,MaterialModule 
    ], 
    providers: [SpWebApiService, ConfigService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

服務：

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import {Observable} from 'rxjs'; 
import 'rxjs/add/operator/map'; 
import { Sites } from './sites'; 
import { ConfigService } from './utils/config.service'; 

@Injectable() 
export class SpWebApiService { 

    apiRoot: string = ''; 

    constructor(private http: Http, private configService: ConfigService) { 
    this.apiRoot = configService.getApiURI(); 
    } 

//With Observable 
    getSitesByName(siteUrl: string): Observable<Sites[]> { 
    // debugger; 
    console.log('GetSitesByName Service call starting... SiteUrl: ' + siteUrl); 
    let apiURL = `${this.apiRoot}Sites/GetSitesByName/${siteUrl}`; 
    return this.http.get(apiURL) 
     .map(res => 
     { 
     console.log('GetSitesByName result: ' + res.text()); 
     return res.json().results.map(item => 
      { 
      return new Sites(
       item.siteID, 
       item.siteURL 
      ); 
      } 
     ) 
     }) 
     .catch(error => { 
     console.log(error); 
     return Observable.throw(error.json()); 
     }); 
    } 

}

組件：

import { Component, OnInit } from '@angular/core'; 
import { ReactiveFormsModule,FormControl, FormsModule } from '@angular/forms'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import {Observable} from 'rxjs'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import { SpWebApiService } from '../sp-web-api.service'; 
import { Sites } from '../sites'; 

@Component({ 
selector: 'app-site-auto-complete', 
templateUrl: './site-auto-complete.component.html', 
styleUrls: ['./site-auto-complete.component.css'] 
}) 
export class SiteAutoCompleteComponent implements OnInit { 

searchForm: FormGroup; 

private sites: Observable<Sites[]>; 
private filteredSites: Observable<Sites[]>; 

constructor(private spWebApiService: SpWebApiService, private fb: FormBuilder) { 
    this.createForm(); 

    this.ServiceCallConf(); 
} 

ServiceCallConf() 
{ 
    // this.siteURL = new FormControl(); 
    this.sites = this.searchForm.get('siteURLInput').valueChanges 
    // .startWith(null) 
    .debounceTime(1000) 
    .distinctUntilChanged() 
    .do(_ => { 
    // if (this.SearchForm.get('siteURL').value.length > 0) 
    // this.loaderService.display(true); 
    // else 
    // return false; 
    })// .do(_ => this.loading = true) 
    .switchMap(searchTerm => this.filterSites(searchTerm)) //switchMap automatically unsubscribes from any previous observable when a new event comes down the stream. 
    .do(_ => 
    { 
     // this.loaderService.display(false);// this.loading = false; 
     console.log(this.sites); 
     // console.log(JSON.parse(JSON.stringify(this.Sites || null))); 
    }) 
    .catch(this.handleSiteServiceError); 
} 
private handleSiteServiceError(error: Response) { 
    // this.loaderService.display(false); 
    return Observable.throw('handleSiteServiceError'); 
} 

filterSites(siteURL: string) { 
    console.log('filterSites starting...' + siteURL); 
    // debugger; 
    if(siteURL=='') 
    return; 

    this.filteredSites = this.spWebApiService.getSitesByName(siteURL); 
    console.log('filteredSites:' + this.filteredSites); 
    return this.filteredSites; 
} 

selectedSite:Sites; 
displayFn(site: Sites): string { 
    // debugger; 
    this.selectedSite = site; 
    console.log('displayFn: ' + this.selectedSite); 
    return site ? site.siteURL : ""; 
} 

createForm() { 
    this.searchForm = this.fb.group({ 
    siteURLInput: ['', Validators.required] 
    }); 
} 

ngOnInit() { 

} 
}

HTML：

<form [formGroup]="searchForm" novalidate> 
    <!--(ngSubmit)="getWeather(WeatherSearchForm)" --> 
    <div class="form-group"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <md-input-container> 
      <input mdInput placeholder="Type Domain Name..." [mdAutocomplete]="auto" 
      class="form-control validate filter-input" formControlName="siteURLInput"> 
      </md-input-container> 
      <md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" 
      required md-input-minlength="2" md-input-maxlength="50" 
      md-select-on-match [displayWith]="displayFn"> 
      <md-option *ngFor="let site of sites | async" [value]="site"> 
       {{ site.siteURL }} 
      </md-option> 
      </md-autocomplete> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-md-6"> 
      <button (click)='LoadSiteInfo(SearchForm)' class="btn btn-success" 
      [disabled]="!searchForm.valid">Go</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</form>

來源

2017-07-13 sa_

整天挖後，終於讓我找到了問題。它與大小寫有關。 Web API返回SiteID而不是siteID。所以我改變了我的代碼如下：

return res.json().results.map(item => 
      { 
      return new Sites(
       item.siteID, 
       item.siteURL 
      ); 
      } 
     )

這樣：

return res.json().results.map(item => 
      { 
      return new Sites(
       item.SiteID, 
       item.SiteUrlShort 
      ); 
      } 
     )

和它的工作。

來源

2017-07-13 15:38:45

角度2材質自動完成組件不顯示項目

回答

相關問題