來自HTTP調用返回的數據過濾 - Angular

我希望我的應用程序僅顯示來自Web服務的大量項目中的9個特定項目。當前，我的應用程序正在處理在project.service.http.ts類中創建自己的測試數據。來自HTTP調用返回的數據過濾 - Angular

而不是創建一個可觀察的假數據，我該如何使用它，所以我可以使用我的HTTP從Web服務獲取作爲可觀察？

在此先感謝！

輸出截至目前 [在這裏輸入的形象描述] [1]！] [1]

我的代碼： project.service.http.ts：

@Injectable() 
    export class ProjectServiceHttp extends ProjectService { 

     //variables 
     baseUrl = "..."; 

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

//mock data BELOW 
            data: Project[] = [ 
             { 
              description: 'toto', 
              href: 'aze', 
              id: 'qqq', 
              name: 'project_1', 
              parentProjectId: '200' 
             }, 
             { 
              description: 'toto', 
              href: 'aze', 
              id: 'aaa', 
              name: 'project_2', 
              parentProjectId: '200' 
             }, 
             { 
              description: 'toto', 
              href: 'aze', 
              id: 'www', 
              name: 'project_3', 
              parentProjectId: '200' 
             }, 
             { 
              description: 'toto', 
              href: 'aze', 
              id: 'ggg', 
              name: 'project_4', 
              parentProjectId: '200' 
             } 
             ]; 


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

     //methods 
//this method currently works and returns an observable of the mock data created above. However i want it to use the data from the HTTP get, like the method below.. 
     fetchProjects(): Observable<Project[]> { 
      return Observable.of(this.data); 
      } 

     //method below to get the data from the web service 
     //not working yet?? 
    /* fetchProjects(): Observable<Project[]>{ 
     console.log("reached service method");  
     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()); 
     } */ 

    }

project.viewer .component.ts：

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


export class ProjectViewerComponent { 
    name = 'ProjectViewerComponent'; 
    projects: Project[] = []; 

    static testIds: string[] = ['qqq', 'aaa']; 

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

    errorMessage = ""; 
    stateValid = true; 

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

//attempt method from earlier version 
    /* 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>

來源

2017-09-15 Liam

我在第一篇文章中回答了您的問題。你已經有了自己的服務方法！我只是不得不使用一個虛擬的模擬您的後端，我不能重現原始問題... 請參閱編輯的回覆在第一篇文章中 –

在上一個問題中，您已經有一個fetchProjects（）方法使用Obrervable從「dev-teamcity：8090/guestAuth/app/rest/projects」獲取數據。只用那個。 – lingthe

@lingthe謝謝！通過將project.viewer.compont.ts中的構造函數更改爲：constructor（private service：ProjectService）{this.service.fetchProjects（）。subscribe（response => { this.projects = response ['project' ] .filter（elements => {0} {BaseComponent是我的班級，使用你的 return ProjectViewerComponent.projectIds.includes（elements.id）; }）; }） } – Liam

修改的fetchProjects()返回它在project.viewer.component.ts該認購後，

return ProjectViewerComponent.projectIds.indexOf(elements.id !== -1);

來源

2017-09-15 11:47:33 amal

如果我沒有理解究竟要過濾的反應形成的陣列的API。如果這樣..try像：

static projectIds: string[] = ["TotalMobileAnalyseInsights","TotalMobileMendel" 
     ,"TotalMobileSlam","TotalMobileServer","TotalMobileWebAdmin","TotalMobileForAndroid" 
     ,"TotalMobileForWindows", "TotalMobileForWindowsUniversal","TotalMobileForIOS"]; 




fetchProjects(): Promise<Project[]> { 
      return this.http<Project[]>.get('APIURL').map((resp)=>{ 

     return resp.filter(xx=> this.projectIds.id.indexOf(xx)>-1); 
       }).toPromise(); 
      }

希望它可以幫助你！

來源

2017-09-15 11:51:28

來自HTTP調用返回的數據過濾 - Angular

回答

相關問題