角度组件：不可能使用 TypeScypt 循环遍历对象数组

Question

can any one please tell me why I can not loop through this array? In ngOnInit, everything works fine. I got an array that I successfully display in the template. But in ngAfterViewInit, console.log show the array but when looping through with "for of" or "forEach", nothing works.

import { JobsService } from '../jobs.service';
import {Job} from '../models/Job';

@Component({
    selector: 'app-job',
    templateUrl: 'job.component.html'
})

export class JobComponent implements OnInit, AfterViewInit {
    title = 'Job';
    jobs: Job[] = [];
    InProcess = '';
    CurrentPartner = '';
    ShowProcess = false;
    sended = '';

    constructor(private jobsService: JobsService) {
    }

    ngOnInit() {
        this.jobs = this.jobsService.getJobs();
    }
    ngAfterViewInit() {
      console.log(this.jobs); // Show the array

      // Nothing happened when looping through the array
      this.jobs.forEach((oneJob) => {
        console.log(oneJob);
      });
    }
}

Screenshot of the console in Google Chrome

The content of the service:

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {Job} from './models/Job';

interface IJob {
  message: string;
  jobs: any[];
}

@Injectable({
  providedIn: 'root'
})

export class JobsService {
  constructor(private httpClient: HttpClient) { }
  private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';
  private REST_API_SERVER_SEND = 'http://localhost:8080/myband/api/sendjob.php';
  jobList: Job[] = [];
  errorMessage: any;
  message: string;

  static handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }

  public getJobs() {
    this.requestJobs().subscribe(
      iJob => {
        this.message = iJob.message;
        for (const job of iJob.jobs) {
          const oneJob: Job = new Job(job);
          this.jobList.push(oneJob);
        }
      },
      error => this.errorMessage = error as any
    );
    return this.jobList;
  }

  public requestJobs(): Observable<IJob> {
    return this.httpClient.get<IJob>(this.REST_API_SERVER).pipe(
       catchError(JobsService.handleError)
    );
  }
}

Answer 1

The first thing I want to say to you is about isolation of responsibilities.

Your service must have just one job: provider one way to access your data; It means your logic inside getJobs() method could be done in your component.

export class JobsService {
    constructor(
        private httpClient: HttpClient,
    ) {}
    private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';

    public requestJobs(): Observable<IJob> {
        return this.httpClient.get<IJob>(this.REST_API_SERVER);
    }
}

Now, you can handler your data in your component.

import { JobsService } from '../jobs.service';

@Component({
    selector: 'app-job',
    templateUrl: 'job.component.html'
})

export class JobComponent implements OnInit, AfterViewInit {
    title = 'Job';
    jobs$;
    InProcess = '';
    CurrentPartner = '';
    ShowProcess = false;
    sended = '';

    constructor(private jobsService: JobsService) {
    }

    ngOnInit() {
        this.jobs$ = this.jobsService.requestJobs();
    }



    ngAfterViewInit() {
        this.jobs$
            .pipe(
                map(() => {}), // change your data here
                catchError(() => {}) // handler your error here;
            )
            .subscribe(
                () => {} // have access to your final data here. 
            );
    }
}

Things to know:

1. You can remove the subscribe() execution and use the async pipe in your template;

2. The use of the operator map in pipe() is optional, you can handler your final data directly from your first callback subscribe() .

3. You can convert your Observable to Promise using toPromise() method in one observable. Don't forgot async / await in your ngAfterViewInit .

Let me know if there is something I can help.

Answer 2

Try:

Object.keys(this.jobs).forEach(job => {
    console.log(this.jobs[job]);
});

Answer 3

Try to assign an iterator function with below part replacement by this code:

// Nothing happened when looping through the array
this.jobs.forEach(oneJob, function(value, key) {
    console.log(key + ': ' + value);
});

Usage of forEach in AngularJS:

For documentation try to check AngularJS forEach Docs

Syntax:

someIterable.forEach(object, iterator, [context])

Answer 4

Please check below example

class Job {
    id: any;
    status: any;
    constructor(obj: any) {
        this.id = obj.id;
        this.status = obj.status;
    }
}

let arr = [
    {
        id: 1,
        status: "job"
    }, {
        id: 2,
        status: "job2"
    }
];

let newArr: any = [];

arr.forEach(a => {
    let obj: Job = new Job(a);
    newArr.push(obj);
})

console.log(newArr);

newArr.forEach((a: any) => {
    console.log(a);
})