Angular2 - Pushing data to an array w/ interface

Question

I have a component that receives data from a service via subscribe. I am storing this data as an array and then using *ngFor to loop over it and display the results in a table.

The problem is, instead of overwriting this array each time the button is clicked, I only want to push to it so that it doesn't wipe out the data already being displayed on the page.

Component:

import { ImportResults } from '../shared/mass.interface';
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { MassEmpService } from '../shared/mass.service';

@Component({
    selector: 'app-employee-selection',
    templateUrl: './employee-selection.component.html',
    styleUrls: ['./employee-selection.component.css']
})

export class EmployeeSelectionComponent implements OnInit {

    // Define our search results
    public searchResults: ImportResults[];

    constructor(
        private _massEmpService: MassEmpService
    ) {
    }

    ngOnInit() {

        this._massEmpService.importedResults.subscribe(
            data => this.searchResults = data
        );

    }
}

Service:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { RouterLink } from '@angular/router';
import { FrameworkService } from '@aps/framework';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class MassEmpService {

    // API URL
    baseUrl = 'https://internal-site/api';

    // Define the token headers for the service calls
    headers: Headers = new Headers({
        "Authorization": this._frameworkService.getSessionInfo().token
    });

    // Create a subject to observe the results and changes over time
    public importedResults = new Subject<any>();

    constructor(
        private _http: Http,
        private _frameworkService: FrameworkService
    ) { }

    // Given a dataset, return the users based on data points submitted
    processImport(dataType, dataSet): Observable<any> {
        return this._http.post(this.baseUrl + '/fetchEmployeesFromImport', { "dataType": dataType, "data": dataSet }, { "headers": this.headers })
            .map((result: Response) => result.json())
            .share()
            .catch(this.handleError);
    };

    // Pass the data received from the import process through our subject to observe
    fetchImportedResults(data){
        this.importedResults.next(data);
    }

    private handleError(error: Response): Observable<any> {
        console.log(error);
        return Observable.throw(error.json() || 'Server Issue');
    }

}

The Problem

In the component, I am setting this.searchResults to the results that are fetched. Each time that is called, it is just overwriting the results. I need this data to be pushed to the array if it doesn't already exist in there instead of overwriting each time.

What I Tried

I tried to initialize the array by doing public searchResults: ImportResults[] = []; and then using data => this.searchResults.push(data). While this doesn't throw an error, my table that is being looped over no longer renders the data. I believe this is due to it now being inside of another array.

This is what my data looks like before I try to use PUSH. I am guessing that when I push to it, its changing the structure so the *ngFor is now not looping correctly.

Answer 1

The issue is that you are pushing the whole array into the results array instead of the individual objects. Try using the spread operator in combination with push to add the new items to the array like this:

data => this.searchResults.push(...data)