如何使用 *ngFor 獲取 json 數據 X 次

Question

我想從我的端點獲取 3 個圖像，這些圖像有很多使用 angular *ngFor（或任何其他可用方法）的圖像

這是我的 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文件

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()}}

我嘗試按照其他帖子的建議使用 [].constructor(3) 但我沒有得到任何結果。 有人可以幫忙嗎

Answer 1

您可以使用 slice 來獲取具有預期項目數的數組

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

語法是

array.slice(first, numberOfElement)