angular - 在角度 4 中加载更多按钮

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

标签： angular

Answer 1

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