How to get json data X times using *ngFor-CodePudding

I want to get 3 images from my endpoint which has lots of images using angular *ngFor(or any other available approach)

Here's my component.html

<div class="col-sm-4 col-xs-6" *ngFor="let result of data.response.constructor(3)">
  <div class="panel-thumbnail"><img class="img-responsive"  width="200" [src]="result.thumbnail"></div>
 </div>

Ts file

export class HomeComponent implements OnInit {
public data:any = []
constructor(private http: HttpClient) {}
getData(){
  const url ='myUrl'
this.http.get(url).subscribe((res)=>{
  this.data = res
  console.log(this.data)
})}
ngOnInit(): void {
 this.getData()}}

I've try to use the [].constructor(3) as suggested from other posts but i dont get any result. Can someone help please

CodePudding user response：

you can use slice to get an array with expected number of item

<div class="col-sm-4 col-xs-6" *ngFor="let result of data.response.slice(0,3)">
  <div class="panel-thumbnail"><img class="img-responsive"  width="200" [src]="result.thumbnail"></div>
 </div>

syntax is

array.slice(first, numberOfElement)