Фильтровать данные из возврата HTTP-вызова — Angular

Я создаю проект, который использует HTTP-запрос из веб-службы и возвращает массив проектов с идентификатором, именем, описанием и т. д.

Раньше, до того, как я создал свой фильтр, get возвращал список из 60 элементов, используя ngFor в файле HTML:

В рамках этого веб-сервиса есть много проектов, но меня интересуют только 9 из них, остальные не имеют значения.

Мой код работал, когда я создал свой собственный наблюдаемый объект с ручными данными: в моем классе project.service.http.ts:

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

а затем в методе fetchProjects:

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

Поскольку я хочу, чтобы наблюдаемый объект был данными из моего http-получения, этот метод недействителен. Я попытался реализовать наблюдаемое, возвращаемое как данные из веб-службы, но при запуске я получаю сообщение об ошибке ниже в своей консоли. Любая помощь в этом будет оценена по достоинству.

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)

Мой код:

проект.сервис.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);
            });
    }

}

проект-просмотрщик.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>

Liam 15.09.2017 источник

Ответы (1)

arrow_upward
2
arrow_downward

Они являются множественными ошибками в вашем проекте. Прежде всего, в вашем сервисе вы неправильно используете оператора карты, который вы должны сделать:

//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< /а>

JEY 15.09.2017

comment

как насчет конструктора компонента? - Liam; 15.09.2017

comment

Ошибки в вашем коде: свойство fromArray не существует для типа typeof Observable. и Не удается найти имя «filterProject». и свойство «id» не существует для типа «{}» - Liam; 15.09.2017

comment

а в конструкторе компонента что делать?? вам не хватает этого кода для вашего решения. Я реализовал код выше, и теперь ошибок нет, но проекты не отображаются - в консоли ничего - Liam; 15.09.2017

comment

Вы вызываете fetchProjects в своем компоненте? Конструктор, кажется, делает то, что fetchProjects. - JEY; 15.09.2017

comment

конструктор моего компонента: конструктор (частный сервис: ProjectService) { this.fetchProjects(); } - Liam; 15.09.2017