5

I have an array called rows of type TestEvent, and want to push to the array, i cant get to output the object i pushes it only shows undefined As you can see this.rows shows the arrays, but when i try to output a spesific array this.rows[0] i get undefined. (Typescript 2.7, Angular 5)

I've tried the following guides:

import { TestEvent } from '../../models/event'
rows: TestEvent[] = []

public push(){
    var test: TestEvent = {id: '222', category:'testcat', event_name: 'name'}
    console.log(test) // Outputs the array

    this.rows.push(test)    //Push the array to this.rows

    console.log(this.rows)  //Outputs array of objects
    consloe.log(this.rows[0])   //Outputs undefined
}

Event.ts

export interface TestEvent{
    id?: string,
    category?: string,
    event_name?: string
}
Igor
  • 60,821
  • 10
  • 100
  • 175
Vlad J
  • 95
  • 1
  • 1
  • 6
  • Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – Igor Mar 08 '18 at 13:50
  • Start by writing code that is formatted and can transpile. Then look at the marked duplicate, you are using `this` when you should not be as `rows` seems to be a local variable. – Igor Mar 08 '18 at 13:51
  • i've forgot to mention that the push was run inside a method – Vlad J Mar 08 '18 at 13:55
  • That could definitely affect `this` depending on how the method was called. `this` could be associated with the browser window object. – Igor Mar 08 '18 at 13:56

3 Answers3

9

That code has no problem and I tested on my local(typescript : 2.5 , angular5). And I got "row[0] : {id: "222", category: "testcat", event_name: "name"}"

interface TestEvent{ 
id?: string,
  category?: string,
  event_name?: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  rows: TestEvent[] = [];

  ngOnInit(){
    var test: TestEvent = {id: '222', category:'testcat', event_name: 'name'};
    console.log(test); // Outputs the array

    this.rows.push(test); //Push the array to this.rows

    console.log(this.rows); //=> 0:{id: "222", category: "testcat", event_name: "name"}
    console.log(this.rows[0]); // => {id: "222", category: "testcat",event_name: "name"}

    }
}
Jihoon Kwon
  • 745
  • 5
  • 14
2

Try this one.

TestEvent.ts

import { Event } from "./Events";


class EventClass{
     Events:Event[]=[];

    constructor()
    {
        
    }

    pushElement(Event:Event)
    {
        this.Events.push(Event) // Push Event parameter value to the Events array
        console.log(this.Events) // Output [{{id:"1",category:"Corporate Event",event_name:"Corporatiz Fair"}}]
    }
}

var event=new EventClass()

event.pushElement({id:"1",category:"Corporate Event",event_name:"Corporatiz Fair"}); //calling pushElement method of EventClass

Event.ts

export interface Event{
    id:string,
    category:string,
    event_name:string
}
Pownraj.S
  • 126
  • 4
0

There is a simple way to bypass that issue. You just use the array length property and assign the new TestEvent values to the end of the array

var test: TestEvent = {id: '222', category:'testcat', event_name: 'name'}
console.log(test); // Outputs the array
this.rows[this.rows.length] = test;   //adds the array to this.rows as the last element
console.log(this.rows);  //Outputs array of objects
Michael Nchendia
  • 1
  • 1