Angular 2 onclick 在数组中添加新项目答案

【问题标题】：Angular 2 onclick add new item in arrayAngular 2 onclick 在数组中添加新项目
【发布时间】：2017-10-26 09:03:16
【问题描述】：

我需要在按下按钮时创建新的列表项（来自 api 的值），但不知道该怎么做。请问有什么帮助吗？这是代码：

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

这里是服务：

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

【问题讨论】：

首先你需要在 loadMore 函数中调用你的 api 一旦你得到结果然后你需要使用 this.jokes = _.union(this.jokes, apiResult) ;希望对你有帮助
不太确定您期望此代码会发生什么。你的 this.jokes.push() 没有参数，所以你什么也不推。你能补充一点细节吗？
没有更简单的方法吗？你能写出完整的函数吗？
loadMore() { this.RandomService.getRandomJokes().subscribe(jokes => {this.jokes = _.union(this.jokes, apiResult) ; }); } 你可以这样使用

标签： javascript angular

【解决方案1】：

只需推送一个空对象

this.jokes.push({});

或者如果它要连接到模态创建一个类并推送它

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

或者如果你想从 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());
}
}

指令

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

我不确定您是否加载了一些随机笑话并想再加载一个，或者您是否想继续加载随机笑话。如果是后者，您将需要取出下一个函数，而是初始化您的笑话数组并继续推送/应用它。像这样

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

【讨论】：

从 API 推送进入服务？ (结果 => this.jokes.push(result)); - 它说笑话不存在
是的，因为你的指令中有笑话。当我回答时，您必须从服务中返回一个值并在您的指令中订阅它。

【解决方案2】：

你有几个问题...

你有这个界面：

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

您收到的是更多属性，因此您需要选择所需的属性：

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

那么你订阅有问题，你应该把数据推送到你的jokes数组而不是这样做：

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

但是：

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

请注意，我将其命名为 (joke => this.jokes.push(joke))，以便更清楚地表明您实际上只是收到一个笑话。

另外，我会从构造函数中删除请求，我们为此设置了 OnInit 钩子。此外，我会将请求应用到单独的函数中，以便在您想要检索新笑话并因此重用该函数时很容易调用，因此如下所示：

ngOnInit() {
  this.getJoke()
}

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

那么当你想检索一个新笑话时，只需在你的模板中调用getJoke：

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

这是一个DEMO

【讨论】：