*ngForএইচটিএমএল উপাদানটি একাধিকবার পুনরুক্ত করতে আমি কীভাবে ব্যবহার করব ?
উদাহরণস্বরূপ: আমার কাছে যদি 20 সদস্যের জন্য একটি সদস্যের ভেরিয়েবল নির্ধারিত থাকে 20 20 বার একটি ডিভিটি পুনরাবৃত্তি করার জন্য আমি কীভাবে * এনজিফোর্ডের নির্দেশনাটি ব্যবহার করব?
উত্তর:
আপনি নিম্নলিখিত ব্যবহার করতে পারেন:
@Component({
(...)
template: `
<div *ngFor="let i of Arr(num).fill(1)"></div>
`
})
export class SomeComponent {
Arr = Array; //Array type captured in a variable
num:number = 20;
}
অথবা একটি কাস্টম পাইপ প্রয়োগ করুন:
import {PipeTransform, Pipe} from '@angular/core';
@Pipe({
name: 'fill'
})
export class FillPipe implements PipeTransform {
transform(value) {
return (new Array(value)).fill(1);
}
}
@Component({
(...)
template: `
<div *ngFor="let i of num | fill"></div>
`,
pipes: [ FillPipe ]
})
export class SomeComponent {
arr:Array;
num:number = 20;
}
arr=Array;?
<ng-container *ngFor="let i of [].constructor(20)">🐱</ng-container>
উত্পন্ন করে 🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱
<div *ngFor="let dummy of ' '.repeat(20).split(''), let x = index">
20আপনার পরিবর্তনশীল সঙ্গে প্রতিস্থাপন
প্রস্তাবিত সমাধানগুলি ব্যবহার করে দুটি সমস্যা রয়েছে Arrays:
এটি একটি Pipe(একবার) সংজ্ঞা দেওয়া আরও দক্ষ বলে মনে হচ্ছে Iterable:
import {PipeTransform, Pipe} from '@angular/core';
@Pipe({name: 'times'})
export class TimesPipe implements PipeTransform {
transform(value: number): any {
const iterable = <Iterable<any>> {};
iterable[Symbol.iterator] = function* () {
let n = 0;
while (n < value) {
yield ++n;
}
};
return iterable;
}
}
ব্যবহারের উদাহরণ (গতিশীল প্রস্থ / উচ্চতা সহ একটি গ্রিড রেন্ডারিং):
<table>
<thead>
<tr>
<th *ngFor="let x of colCount|times">{{ x }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let y of rowCount|times">
<th scope="row">{{ y }}</th>
<td *ngFor="let x of colCount|times">
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>
আপনি আপনার HTML এ এটি সহজ করতে পারেন:
*ngFor="let number of [0,1,2,3,4,5...,18,19]"
এবং সূচকে ভেরিয়েবল "সংখ্যা" ব্যবহার করুন।
20সদস্যের পরিবর্তনশীলকে নিয়োগ দিয়েছেন .. সুতরাং এটি খুব বেশি
*ngFor="let number of [0,1,2,3,4,5...,199,200]":-D
একটি সহজ এবং পুনরায় ব্যবহারযোগ্য সমাধান সম্ভবত এর মতো কাস্টম কাঠামোগত নির্দেশ ব্যবহার করতে।
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appTimes]'
})
export class AppTimesDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) { }
@Input() set appTimes(times: number) {
for (let i = 0 ; i < times ; i++) {
this.viewContainer.createEmbeddedView(this.templateRef);
}
}
}
এবং এটি এর মতো ব্যবহার করুন:
<span *appTimes="3" class="fa fa-star"></span>
এটি অর্জনের সবচেয়ে দক্ষ এবং সংক্ষিপ্ত উপায় হ'ল একটি পুনরুক্তিযোগ্য ইউটিলিটি যুক্ত করা। ফলনশীল মানগুলিকে বিরক্ত করবেন না। এনজিফোর্ডের নির্দেশিকায় কোনও ভেরিয়েবল সেট করতে বিরক্ত করবেন না:
function times(max: number) {
return {
[Symbol.iterator]: function* () {
for (let i = 0; i < max; i++, yield) {
}
}
};
}
@Component({
template: ```
<ng-template ngFor [ngForOf]="times(6)">
repeats 6 times!
</ng-template>
```
})
export class MyComponent {
times = times;
}
আপনি যদি লোডাশ ব্যবহার করছেন তবে আপনি নিম্নলিখিতগুলি করতে পারেন:
আপনার উপাদানটিতে লোড্যাশ আমদানি করুন ।
import * as _ from "lodash";
লোড্যাশের উল্লেখের জন্য উপাদানটির মধ্যে সদস্যের পরিবর্তনশীল ঘোষণা করুন।
lodash = _;
তারপরে আপনার দৃষ্টিতে, আপনি পরিসীমা ফাংশনটি ব্যবহার করতে পারেন । 20 আপনার উপাদানগুলির মধ্যে কোনও ভেরিয়েবল দ্বারা প্রতিস্থাপিত হতে পারে।
*ngFor="let number of lodash.range(20)"
এটি অবশ্যই বলা উচিত যে ভিউতে ফাংশনগুলি সীমাবদ্ধ করা ব্যয়বহুল হতে পারে, পরিবর্তনের সনাক্তকরণ হিসাবে আপনি যে ফাংশনটি কল করছেন তার জটিলতার উপর নির্ভর করে বার বার ফাংশনটি কল করবে।
বেশিরভাগ উত্তরের পরামর্শ মতো আপনার অ্যারে পূরণ করার দরকার নেই। আপনি যদি নিজের লুপটিতে সূচক ব্যবহার করেন তবে ngForআপনাকে যা তৈরি করতে হবে তা হ'ল সঠিক দৈর্ঘ্যের খালি অ্যারে:
const elements = Array(n); // n = 20 in your case
এবং আপনার দৃষ্টিতে:
<li *ngFor="let element in elements; let i = index">
<span>{{ i }}</span>
</li>
আপনি এটি সহজভাবে ব্যবহার করতে পারেন:
এইচটিএমএল
<div *ngFor="let i of Count">
টিএস
export class Component implements OnInit {
Count = [];
constructor() {
this.Count.length = 10; //you can give any number
}
ngOnInit(): void {}
}
সহজ পদ্ধতির:
কোনও সহায়কআরয়ের সংজ্ঞা দিন এবং আপনি আপনার এইচটিএমএল উপাদানগুলি তৈরি করতে চান এমন গণনাটির দৈর্ঘ্য সহ গতিশীলভাবে (বা আপনি চাইলে স্থির থাকতে পারেন) এটি ইনস্ট্যান্ট করুন। উদাহরণস্বরূপ, আমি সার্ভার থেকে কিছু ডেটা পেতে এবং ফিরে আসা অ্যারের দৈর্ঘ্যের সাথে উপাদান তৈরি করতে চাই।
export class AppComponent {
helperArray: Array<any>;
constructor(private ss: StatusService) {
}
ngOnInit(): void {
this.ss.getStatusData().subscribe((status: Status[]) => {
this.helperArray = new Array(status.length);
});
}
}
তারপরে আমার এইচটিএমএল টেমপ্লেটে সহায়ক সহায়ক ব্যবহার করুন r
<div class="content-container" *ngFor="let i of helperArray">
<general-information></general-information>
<textfields></textfields>
</div>
ইলিয়াস লামরানির কাঠামোগত দিকনির্দেশনার কিছুটা উন্নত সংস্করণ এখানে আপনাকে নিজের টেমপ্লেটে সূচি ব্যবহার করতে দেয়:
@Directive({
selector: '[appRepeatOf]'
})
export class RepeatDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
@Input()
set appRepeatOf(times: number) {
const initialLength = this.viewContainer.length;
const diff = times - initialLength;
if (diff > 0) {
for (let i = initialLength; i < initialLength + diff; i++) {
this.viewContainer.createEmbeddedView(this.templateRef, {
$implicit: i
});
}
} else {
for (let i = initialLength - 1; i >= initialLength + diff ; i--) {
this.viewContainer.remove(i);
}
}
}
ব্যবহার:
<li *appRepeat="let i of myNumberProperty">
Index: {{i}}
</li>
আমি জানি যে আপনি বিশেষত * এনজিফোর্ড ব্যবহার করে এটি করতে বলেছিলেন, তবে কাঠামোগত দিকনির্দেশনা ব্যবহার করে আমি যেভাবে সমাধান করেছি তা ভাগ করে নিতে চেয়েছিলাম:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[appRepeat]' })
export class RepeatDirective {
constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {
}
@Input() set appRepeat(loops: number) {
for (let index = 0; index < loops; ++index) {
this.viewContainerRef.createEmbeddedView(this.templateRef);
}
}
}
এটির সাথে আপনি এটি ঠিক এটি ব্যবহার করতে পারেন:
<div *appRepeat="15">
Testing
</div>