Question

我正在创建一个项目，该项目使用来自Web服务的HTTP get并返回一个项目数组，包括ID，名称，描述等。

以前，在我创建过滤器之前，get在HTML文件中使用ngFor返回了60个元素的列表：

此Web服务中有许多项目，但我只关注其中的9项，其余项目无关紧要。

当我使用手动数据创建自己的可观察对象时，我的代码正常工作：在我的project.service.http.ts类中：

Out-of-bounds

然后在fetchProjects方法中：

data: Project[] = [
    {
id:...,
name:...
etc
    },

因为我希望observable对象是我的http get中的数据，所以此方法无效。我试图实现从Web服务返回的observable作为数据，但是在运行时我在控制台中收到了以下错误。任何有关这方面的帮助将不胜感激。

fetchProjects(): Observable<Project[]> {
    return Observable.of(this.data);
  }

我的代码：

project.service.http.ts：

core.es5.js:1020 ERROR TypeError: response.filter is not a function
    at SafeSubscriber._next (project.viewer.component.ts:36)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:83)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at XMLHttpRequest.onLoad (http.es5.js:1226)

project.viewer.component.ts：

@Injectable()
export class ProjectServiceHttp extends ProjectService {

    //variables
    baseUrl = "";

    static projectIds: string[] = ["","","","","",""
                            ,"", "",""];

    //constructor
   constructor(private http: Http) {
        super();
    }

    //methods
    fetchProjects(): Observable<Project[]>{
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});
        return this.http.get(this.baseUrl, options)
          .map((response: Response) => 
          {
            let result = response.json();
            return Observable.of(result);
          })
          .catch(this.handleError);
        }

}

项目viewer.html：

@Component({
    selector: 'project-viewer',
    templateUrl: './project-viewer.html',  
    styleUrls: ['./project-viewer.css']
})

export class ProjectViewerComponent  {
    name = 'ProjectViewerComponent';
    projects: Project[] = [];
    static projectIds: string[] = ["",""
    ,"","","",""
    ,"", "",""];
    errorMessage = "";
    stateValid = true;

    constructor(private service: ProjectService) {
        this.service.fetchProjects().subscribe(response => {
          this.projects = response.filter(elements => {
            return ProjectViewerComponent.projectIds.includes(elements.id);
          });
        })
      }

    private fetchProjects() {
        this.service
            .fetchProjects()
            .subscribe(response =>{
              this.projects = response['project']
              .filter(project => { return  ['...', '','','','','...'
              ,'','',''].indexOf(project.id) !== -1})
              console.log(response);
              console.log(this.projects);
            },
            errors=>{
               console.log(errors);
            });
    }

}

Answer 1

它们是您项目中的多个错误。首先，在您的服务中，您没有正确使用应该执行的地图运算符：

//methods
fetchProjects(): Observable<Project[]>{
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.get(this.baseUrl, options)
      .map(response => response.json())
}

然后在您订阅该服务的组件中，您尝试进行过滤。您可以在订阅之前执行此操作：

private fetchProjects() {
    const filterProject = ['TotalMobileAnalyseInsights', 'TotalMobileMendel','TotalMobileSlam','TotalMobileServer','TotalMobileWedAdmin','TotalMobileForAndroid'
              ,'TotalMobileForWindows','TotalMobileForWindowsUniversal','TotalMobileForIOS'];
    this.service.fetchProjects()
       // convert each element of the array into a single observable
       .flatMap(projects => ArrayObservable.create(projects))
       // filter project
       .filter(project => filterProject.indexOf(project.id) !== -1)
       .toArray()
       // subscribe and do something with the project
       .subscribe(projects => console.log(projects));
}

以下是一个快速运行的示例https://plnkr.co/edit/3nzr3CFhV2y0iu3cQwAF?p=preview

过滤HTTP Call - Angular返回的数据

1 个答案: