从10个项目的api中,我想要显示所有10个项目,并且在点击的按钮中想要重复显示相同的所有10个项目,并且再次点击相同的10个项目重复
app.component.html
<div>
<ul *ngFor="let x of content">
<li>{{x.name}}</li>
</ul>
<li class="showmore">
<button class="load-more" (click)="getData()">
load more
</button>
</li>
</div>
app.component.ts
export class AppComponent {
constructor(private http: Http) { this.counter=0;
this.getData();
}
httpdata = [];
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users")
.map((response) => response.json())
.subscribe((data) => { this.displaydata(data); } )
}
content:any[]=new Array();
counter:number;
displaydata(data) {this.httpdata = data;}
getData(){
console.log(this.counter + 'dat size'+this.httpdata.length)
for(let i=this.counter+1;i<this.httpdata.length;i++) {
this.content.push(this.httpdata[i]);
if(i%15==0) break;
}
this.counter+=5;
}
}
答案 0 :(得分:0)
如果你想克隆一个数组,你需要使用不同的键或值来推送,在你的情况下你需要不同的键。
答案 1 :(得分:0)
export class AppComponent {
constructor(private http: Http) { this.counter=0;
this.getData();
}
httpdata = [];
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users")
.map((response) => response.json())
.subscribe((data) => { this.displaydata(data); } )
}
content:any[]=new Array();
counter:number;
displaydata(data) {this.httpdata = data;}
getData(){
let content = [...this.content];
console.log(this.counter + 'dat size'+this.httpdata.length)
for(let i=this.counter+1;i<this.httpdata.length;i++) {
content.push(this.httpdata[i]);
if(i%15==0) break;
}
this.content = content;
this.counter+=5;
}
}