Question

我希望我的应用程序只显示来自Web服务的大量项目中的9个特定项目。在那一刻，我的应用程序正在使用我在project.service.http.ts类中创建的测试数据。

我不是创建一个可观察的虚假数据，而是如何使用它，以便我可以使用HTTP Get from 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>

Answer 1

修改fetchProjects()订阅project.viewer.component.ts之后的回复，

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

Answer 2

如果我完全明白你想要用你的数组来过滤API的响应..如果是这样的话......就像：

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

希望它可以帮到你！

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

2 个答案: