Bagaimana cara membatasi ngFor untuk mengulang beberapa item di Angular?

Kode Saya:

<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
  <template [ngIf]="i<11">{{item.text}}</template>
</li>

Saya mencoba untuk hanya menampilkan 10 elemen daftar pada titik mana pun. Seperti yang disarankan dalam jawaban di sini , saya menggunakan ngIf tetapi ini menghasilkan item daftar kosong (di luar 10) muncul di halaman.

Ini tampak lebih sederhana bagi saya

<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>

Lebih dekat dengan pendekatan Anda

<ng-container *ngFor="let item of list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>

Anda dapat langsung menerapkan slice()ke variabel. Demo StackBlitz

<li *ngFor="let item of list.slice(0, 10);">
   {{item.text}}
</li>

Ini bekerja dengan sangat baik:

<template *ngFor="let item of items; let i=index" >
 <ion-slide *ngIf="i<5" >
  <img [src]="item.ItemPic">
 </ion-slide>
</template>

Sebagai contoh, katakanlah kita hanya ingin menampilkan 10 item pertama dari sebuah array, kita bisa melakukan ini menggunakan SlicePipe seperti ini:

<ul>
     <li *ngFor="let item of items | slice:0:10">
      {{ item }}
     </li>
</ul>

Selain jawaban @ Gunter, Anda dapat menggunakan trackBy untuk meningkatkan kinerja. trackBy menggunakan fungsi yang memiliki dua argumen: index dan item. Anda dapat mengembalikan nilai unik pada objek dari fungsi tersebut. Ini akan menghentikan rendering ulang item yang sudah ditampilkan di ngFor. Di html Anda, tambahkan trackBy seperti di bawah ini.

<li *ngFor="let item of list; trackBy: trackByFn;let i=index" class="dropdown-item" (click)="onClick(item)">
  <template [ngIf]="i<11">{{item.text}}</template>
</li>

Dan tulis fungsi seperti ini di file .ts Anda.

trackByfn(index, item) { 
  return item.uniqueValue;
}

html

<table class="table border">
    <thead>
        <tr>
            <ng-container *ngFor="let column of columns; let i = index">
                <th>{{ column }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of groups;let i = index">
            <td>{{row.name}}</td>
            <td>{{row.items}}</td>
            <td >
                <span class="status" *ngFor="let item of row.Status | slice:0:2;let j = index">
                    {{item.name}}
                   </span><span *ngIf = "i < 2" class="dots" (mouseenter) ="onHover(i)" (mouseleave) ="onHover(-1)">.....</span> <span [hidden] ="test" *ngIf = "i == hoverIndex" class="hover-details"><span  *ngFor="let item of row.Status;let j = index">
                    {{item.name}}
                   </span></span>
           </td>

        </tr>
  </tbody>
</table>

<p *ngFor="let group of usersg"><input type="checkbox" [checked]="isChecked(group.id)" value="{{group.id}}" />{{group.name}}</p>

<p><select [(ngModel)]="usersr_selected.id">
   <option *ngFor="let role of usersr" value="{{role.id}}">{{role.name}}</option> 
</select></p>

naskah ketikan

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: any;
 dataGroup: FormGroup;
 selectedGroups: string[];
    submitted = false;
    usersg_checked:any;
    usersr_selected:any;
    dotsh:any;
    hoverIndex:number = -1;
    groups:any;
    test:any;
 constructor(private formBuilder: FormBuilder) {


     }
     onHover(i:number){
 this.hoverIndex = i;
}
     columns = ["name", "Items","status"];

public usersr = [{
    "id": 1,
    "name": "test1"

}, {
    "id": 2,
    "name": "test2",

}];


  ngOnInit() {
      this.test = false;
      this.groups=[{
        "id": 1,
        "name": "pencils",
        "items": "red pencil",
        "Status": [{
            "id": 1,
            "name": "green"
        }, {
            "id": 2,
            "name": "red"
        }, {
            "id": 3,
            "name": "yellow"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 1"
        }, {
            "id": 2,
            "name": "loc 2"
        }, {
            "id": 3,
            "name": "loc 3"
        }]
    },
    {
        "id": 2,
        "name": "rubbers",
        "items": "big rubber",
        "Status": [{
            "id": 1,
            "name": "green"
        }, {
            "id": 2,
            "name": "red"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 2"
        }, {
            "id": 2,
            "name": "loc 3"
        }]
    },
    {
        "id": 3,
        "name": "rubbers1",
        "items": "big rubber1",
        "Status": [{
            "id": 1,
            "name": "green"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 2"
        }, {
            "id": 2,
            "name": "loc 3"
        }]
    }

];

      this.dotsh = false;

      console.log(this.groups.length);

this.usersg_checked = [{
    "id": 1,
    "name": "test1"

}, {
    "id": 2,
    "name": "test2",

}];

 this.usersr_selected = {"id":1,"name":"test2"};;

this.selectedGroups = [];
this.dataGroup = this.formBuilder.group({
            email: ['', Validators.required]
});
  }

  isChecked(id) {
   console.log(this.usersg_checked);
  return this.usersg_checked.some(item => item.id === id);
}
 get f() { return this.dataGroup.controls; }
onCheckChange(event) {
  if (event.target.checked) {
 this.selectedGroups.push(event.target.value);
} else {
 const index = this.selectedGroups.findIndex(item => item === event.target.value);
 if (index !== -1) {
  this.selectedGroups.splice(index, 1);
}
}
}

   getFormData(value){
      this.submitted = true;

        // stop here if form is invalid
        if (this.dataGroup.invalid) {
            return;
        }
      value['groups'] = this.selectedGroups;
      console.log(value);
  }


}

css

.status{
    border: 1px solid;
    border-radius: 4px;
    padding: 0px 10px;
    margin-right: 10px;
}
.hover-details{
    position: absolute;


    border: 1px solid;
    padding: 10px;
    width: 164px;
    text-align: left;
    border-radius: 4px;
}
.dots{
    position:relative;
}

 <div *ngFor="let item of list;trackBy: trackByFunc" >
   {{item.value}}
 </div>

Di file ts Anda

 trackByFunc(index, item){
    return item ? item.id : undefined;
  }