【发布时间】:2018-01-01 05:36:10
【问题描述】:
我想在文本框上实现自动完成功能,因为我创建了返回 Json 格式文件的 Web API,但我得到“找不到类型为 'object' 的不同支持对象 '[object Object]'。NgFor 仅支持绑定到诸如数组之类的可迭代对象。” 请同样帮助我
我的代码:=
服务
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
@Injectable()
export class ClientSearchService {
endPoint: string;
constructor(private http: Http) {
this.endPoint = "http://localhost:57888/api/Employees/GetEmployeeById";
}
search(term: string): Observable<any[]> {
var ClientList = this.http.get(this.endPoint + '/' + term)
.map((r: Response) => { return (r.json().length != 0 ? r.json() : [{ "ClientId": 0, "ClientName": "No Record Found" }]) as any[] });
return ClientList;
}
}
应用组件.ts
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { ClientSearchService } from './_services/client-search.service';
@Component({
selector: 'client-search',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
public clients: Observable<any[]>;
private searchTerms = new Subject<string>();
public ClientName = '';
public flag: boolean = true;
constructor(
private clientSearchService: ClientSearchService,
) {
}
ngOnInit(): void {
this.clients = this.searchTerms
.debounceTime(300)
.distinctUntilChanged()
.switchMap(term => term
? this.clientSearchService.search(term)
: Observable.of<any[]>([]))
.catch(error => {
console.log(error);
return Observable.of<any[]>([]);
});
}
searchClient(term: string): void {
this.flag = true;
this.searchTerms.next(term);
}
onselectClient(ClientObj) {
if (ClientObj.ClientId != 0) {
this.ClientName = ClientObj.ClientName;
this.flag = false;
}
else {
return false;
}
}
}
HTML
</div>
</div>
<div class="search-result" *ngIf="flag">
<ul>
<li *ngFor="let client of clients | async">
//<a (click)="onselectClient(client)">{{client.ClientName}}</a>
</li>
</ul>
</div>
我的json文件如下
{"ClientId":15,"ClientName":"Abhinav Singh"}
【问题讨论】:
标签: angular