আমার কোড:
<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
<template [ngIf]="i<11">{{item.text}}</template>
</li>
আমি চেষ্টা করছি যে কোনও পয়েন্টে কেবলমাত্র 10 টি তালিকার উপাদান প্রদর্শন করা। এখানে উত্তরের পরামর্শ অনুসারে , আমি এনজিআইফ ব্যবহার করেছি তবে ফলাফলটি খালি তালিকার আইটেমগুলিতে (10 এর বাইরে) পৃষ্ঠাতে প্রদর্শিত হবে।
উত্তর:
এটি আমার কাছে সহজ বলে মনে হচ্ছে
<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>
slice:0:10প্রভাব মূল অ্যারের ??
sliceএকটি অনুলিপি ফেরত দেয় এবং আসল
| slice:0:10পাইপ, মহান, এটা আমাকে সাহায্য একটি "আরো" বাটনে যে ইনক্রিমেন্ট নামের সঙ্গে একটি তালিকা গঠন করা হয় slices'র দ্বিতীয় যুক্তি।
আপনি সরাসরি slice()পরিবর্তনশীল প্রয়োগ করতে পারেন । স্ট্যাকব্লিটজ ডেমো
<li *ngFor="let item of list.slice(0, 10);">
{{item.text}}
</li>
এটি খুব ভাল কাজ করে:
<template *ngFor="let item of items; let i=index" >
<ion-slide *ngIf="i<5" >
<img [src]="item.ItemPic">
</ion-slide>
</template>
উদাহরণস্বরূপ, ধরুন আমরা কোনও অ্যারের কেবল প্রথম 10 টি আইটেম প্রদর্শন করতে চাই, আমরা স্লাইস পাইপটি এভাবে ব্যবহার করে করতে পারি :
<ul>
<li *ngFor="let item of items | slice:0:10">
{{ item }}
</li>
</ul>
@ গুনটারের উত্তর ছাড়াও, আপনি কর্মক্ষমতা উন্নত করতে ট্র্যাকবাই ব্যবহার করতে পারেন । ট্র্যাকবাই একটি ফাংশন নেয় যার দুটি যুক্তি রয়েছে: সূচি এবং আইটেম। আপনি ফাংশন থেকে অবজেক্টে একটি অনন্য মান ফিরে আসতে পারেন। এটি এনজিফোর্মে ইতিমধ্যে প্রদর্শিত আইটেমগুলিকে পুনরায় রেন্ডারিং বন্ধ করবে। আপনার এইচটিএমএলে নিচের মত ট্র্যাকবাই যুক্ত করুন।
<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;
}
<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;
}
<div *ngFor="let item of list;trackBy: trackByFunc" >
{{item.value}}
</div>
আপনার টিএস ফাইলের মধ্যে
trackByFunc(index, item){
return item ? item.id : undefined;
}