Question

我已经创建了一个从http api获取作业对象列表的服务。在消费视图组件（ticket-adder）中，我想调用一个过滤列表的方法，我需要在每个主列表（作业）更新时调用它。这是因为主要作业列表似乎是异步调用的，并且在（tick-adder）首次加载并调用GetJobs（）时为空。

票证adder.component

import { Component, Input, OnInit } from "@angular/core";
import { Http, Response, Headers, RequestOptions, RequestMethod, Request } from "@angular/http";
import { JobBase, Employee, WorkCategory, TimeEntryApi } from "./models";
import { JobService } from "./job.service";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ticket-adder',
    templateUrl: './app/ticket-adder.html',    
    providers: [JobService]
})

export class TicketAdderComponent implements OnInit {

    activeJobs: Array<JobBase> = [];
    @Input() name;


    constructor(public activeModal: NgbActiveModal, public http: Http, private jobServ: JobService) {

    }

    ngOnInit(): void {
        this.getJobs();

    }

    getJobs(): void {
       this.activeJobs = this.jobServ.jobs.filter(x => x.status > 9).map(blah => new JobBase(blah.id, blah.jobName, blah.jobNumber));
    }   
}

job.service

import { Component, Input, Injectable } from "@angular/core";
import { Http, Response, Headers, RequestOptions, RequestMethod, Request } from "@angular/http";
import { JobBase, JobMore } from "./models";
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs'
import { List } from 'immutable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';


@Injectable()
export class JobService {

    public jobs: Array<JobMore> = [];

    constructor(public http: Http) {
        this.GetJobs();
    }

    GetJobs() {

        this.http.get('./api/job')
            .map(res => (<Response>res).json())
            .map((jobs1: Array<any>) => {
                let result: Array<JobMore> = [];
                if (jobs1) {
                    jobs1.forEach(j => {
                        result.push(
                            new JobMore(
                                j.id,
                                j.jobName,
                                j.jobNumber,
                                j.status
                            ));
                    });
                }

                return result;
            }).
            subscribe(
            data => {
                this.jobs = data;
                console.log(this.jobs);
            },
            err => console.log("Jobs API Call: ", err)
            );
    }

}

编辑：

据我所知。我在运行时遇到错误“result.filter（...）。map（...）。toArray不是函数”

（票证加法器）

getJobs(): void {
    //this.jobServ.GetJobs();
    //this.activeJobs = this.jobServ.jobs.filter(x => x.status > 9).map(blah => new JobBase(blah.id, blah.jobName, blah.jobNumber));

    this.jobServ.GetJobs().subscribe(
        result => this.activeJobs = result.filter(x => x.status > 9).map(blah => new JobBase(blah.id, blah.jobName, blah.jobNumber)).toArray(),
        error => console.error,
        () => console.log('completed function here or remove ')
    );

    this.Submitted = this.activeJobs.length.toString();
}

（job.service）

public jobs: List<JobMore>;

GetJobs(): Observable<List<JobMore>>{
    return this.http.get('./api/job')
        .map(this.JobsResponseMapper)

    /*this.http.get('./api/job')
        .map(res => (<Response>res).json())
        .map((jobs1: Array<any>) => {
            let result: Array<JobMore> = [];
            if (jobs1) {
                jobs1.forEach(j => {
                    result.push(
                        new JobMore(
                            j.id,
                            j.jobName,
                            j.jobNumber,
                            j.status
                        ));
                });
            }

            return result;
        });
    */
}

Answer 1

因为http.get被称为异步，所以在您的服务中设置作业之前设置了activeJobs，因此activeJobs将为空

在您的服务中，我看到您进行了大量的映射和订阅。我建议不要订阅您的服务并更改您的代码，如下所示。

ticket.adder：

getJobs(): void {
     this.jobServ.GetJobs().subscribe(
        result => this.activeJobs = result.filter(...),
        error => console.error,
        () => console.log('completed function here or remove ')
     )
}

job.service

    GetJobs() {
        this.http.get('./api/job')
            .map(MyResponseMapper)
    }

MyResponseMapper(response: Response) {
    data = response.json();
    //do whatever with data
    return data;
}

在上面的代码中，将使用GetJobs（）返回的数据设置activeJobs。

希望这有帮助。

更新数组时如何调用过滤器方法

1 个答案: