मैं एनग्युलर को कुछ संख्या में कोणीय में कैसे दोहरा सकता हूं?

Question

मेरा कोड:

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

मैं किसी भी बिंदु पर केवल 10 सूची तत्वों को प्रदर्शित करने का प्रयास कर रहा हूं। जैसा कि यहाँ उत्तर में सुझाया गया है , मैंने ngIf का उपयोग किया है, लेकिन यह पृष्ठ पर दिखाई देने वाली खाली सूची आइटम (10 से अधिक) में परिणाम देता है।

Answer 1

यह मुझे सरल लगता है

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

अपने दृष्टिकोण के करीब

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

Comments

दूसरा दृष्टिकोण आपको UI के लिए बेहतर लचीलापन देता है। यानी * ngIf = "i <11 || showAll"

— bryjohns

नमस्ते, मान लें कि सरणी में 12 आइटम हैं और हम 3 स्लाइस करते हैं ... कैसे शेष प्राप्त करें ताकि इसे कहीं और प्रदर्शित किया जा सके (जैसे कि एक बटन में: 9 आइटम बचे हुए)

— यासिर

slice:0:10मूल सरणी को प्रभावित करता है ??

— Mr.7

sliceएक प्रति लौटाता है और मूल सरणी को प्रभावित नहीं करता है

— गुंटर ज़ोचबॉयर

| slice:0:10पाइप, महान, यह मेरे में मदद की एक "अधिक" बटन है कि वेतन वृद्धि के साथ एक सूची का निर्माण करने के लिए है slicesकी दूसरा तर्क।

— मचाडो

Answer 2

यह बहुत अच्छी तरह से काम करता है:

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

Answer 3

आप सीधे slice()वेरिएबल पर आवेदन कर सकते हैं । स्टैकब्लिट्ज डेमो

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

Answer 4

उदाहरण के लिए, हम कहते हैं कि हम किसी सरणी के केवल पहले 10 आइटम प्रदर्शित करना चाहते हैं, हम ऐसा कर सकते हैं जैसे कि SlicePipe :

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

Answer 5

@ गंटर के जवाब के अलावा, आप प्रदर्शन में सुधार के लिए ट्रैकबी का उपयोग कर सकते हैं । trackBy एक फ़ंक्शन लेता है जिसमें दो तर्क होते हैं: सूचकांक और आइटम। आप फ़ंक्शन से ऑब्जेक्ट में एक अद्वितीय मान वापस कर सकते हैं। यह ngFor में पहले से प्रदर्शित वस्तुओं को फिर से प्रस्तुत करना बंद कर देगा। अपने HTML में नीचे ट्रैकबाय जोड़ें।

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

और अपने .ts फ़ाइल में इस तरह एक फ़ंक्शन लिखें।

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

Answer 6

एचटीएमएल

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

टाइपप्रति

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


}

सीएसएस

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

Answer 7

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

आपकी ts फ़ाइल में

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