Загрузить больше кнопки в углу 4

Question

Из api из 10 элементов я хочу показать все 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

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

Answer 2

Если вы хотите клонировать массив, вам нужно нажать разные клавиши или значение, в вашем случае вам нужны разные клавиши.