Question

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

Answer 1

如果你想克隆一个数组，你需要使用不同的键或值来推送，在你的情况下你需要不同的键。

Answer 2

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

在角4中加载更多按钮

2 个答案: