javascript - Angular 2 onclick add new item in array

Question

I need to create new list item(value from api)on button press but don't know how to do it. Any help please? here is the code:

<ul>
<li *ngFor="let joke of jokes">{{joke.value}}</li>
</ul>
<button (click)="loadMore">more jokes</button>
`,
providers: [RandomService]

})
export class PocetnaComponent  { 
jokes: Joke[];

constructor(private jokesService: RandomService){
this.jokesService.getRandomJokes().subscribe(jokes => {this.jokes = 
[jokes]});
}

loadMore(){
this.jokes.push();
}

}
 interface Joke{
 id: number;
 value: string;
}

here is the service:

@Injectable()
export class RandomService {  
constructor(private http: Http){
    console.log('working');

}
getRandomJokes(){
    return this.http.get('https://api.chucknorris.io/jokes/random')
    .map(res => res.json());
}
}

Answer 1

Just push an empty object

this.jokes.push({}); 

or if its going to be hooked up to a modal Create a class and push that

Class IJoke {
 id: number;
 value: string;
 constructor(){
 }
}
this.jokes.push(new IJoke()); 

Or if you want to push from an API

@Injectable()
export class RandomService {  
constructor(private http: Http){
    console.log('working');

}
getRandomJokes(){
    return this.http.get('https://api.chucknorris.io/jokes/random')
    .map(res => res.json());
}
getNextJoke(){
    return this.http.get('https://api.chucknorris.io/jokes/next')
    .map(res => res.json());
}
}

Directive

loadMore(){
    this.jokesService.getNextJoke().subscribe(joke => {
        this.jokes.push(joke); 
    });
}

I'm not sure if you load some random jokes and you want to load one more, or if you want to keep loading random jokes. If the later, you will want to take out the next function, and instead init your jokes array and keep pushing/applying to it. like so

jokes: Joke[] = new Array();
constructor(private jokesService: RandomService){
this.jokesService.getRandomJokes().subscribe(jokes => {
    this.jokes.push(jokes)
});