從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