Angular 2 onclick add new item in array

问题:

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());
}
}

回答1:

You have a few problems...

You have this interface:

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

what you are receiving is much more properties, so you'd need to pick the properties you want:

getRandomJokes(){
  return this.http.get('https://api.chucknorris.io/jokes/random')
    .map(res => res.json());
    // pick the properties you want/need
    .map(joke => <Joke>{id: joke.id, value: joke.value})
}

Then you have problems in the subscribe, you should push the data to your jokes array and not do:

.subscribe(jokes => {this.jokes = [jokes]})

but:

.subscribe(joke => this.jokes.push(joke)}

notice above that I named this (joke => this.jokes.push(joke)) to make it clearer that you are actually just receiving one joke.

Also I would remove the request from the constructor, we have the OnInit hook for this. Also I would apply the request in a separate function, so that it's easy to call when you want to retrieve new jokes and also therefore reuse the function, so something like this:

ngOnInit() {
  this.getJoke()
}

getJoke() {
  this.jokesService.getRandomJokes()
    .subscribe(joke => {
       this.jokes.push(joke)
    })    
}

So then in your template just call getJoke when you want to retrieve a new joke:

<ul>
  <li *ngFor="let joke of jokes">{{joke.value}}</li>
</ul>
<button (click)="getJoke()">more jokes</button>

Here's a DEMO

回答2:

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)
});