从HTTP调用的返回过滤数据 - 角

Question

我创建从一个Web服务使用HTTP GET和返回的项目的数组，ID，名称，描述等

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

有这个Web服务中的许多项目，但我只关心与他们的9其余的都是无关紧要的。

当我创建了人工数据我自己观察的对象我的代码是工作：在我project.service.http.ts类：

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

然后在fetchProjects方法：

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

因为我想让可观察对象成为我的http get的数据，所以此方法无效。我试图实现从Web服务中返回的作为数据的observable，但运行时我的控制台中出现下面的错误。 任何帮助，将不胜感激。

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.service.http.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); 
     } 

} 

project.viewer.component.ts：

@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); 
      }); 
    } 

} 

项目viewer.html：

<h3>Projects </h3> 
<div > 
    <ul class= "grid grid-pad"> 
     <a *ngFor="let project of projects" class="col-1-4"> 
      <li class ="module project" > 
       <h4 tabindex ="0">{{project.name}}</h4> 
      </li> 
     </a> 
    </ul> 
</div> 

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