किसी संख्या के आधार पर ngFor का उपयोग करके HTML तत्व को कई बार दोहराएं

Question

मैं *ngForएक HTML तत्व को कई बार दोहराने के लिए कैसे उपयोग कर सकता हूं ?

उदाहरण के लिए: यदि मेरे पास एक सदस्य चर है जिसे 20 को सौंपा गया है। मैं 20 बार तलाक को दोहराने के लिए * एनकफ़र निर्देश का उपयोग कैसे करूँ?

Comments

यह भी देखें stackoverflow.com/questions/47586525/...

— yurzui

इसे प्राप्त करने के चार तरीके हैं , यहां पढ़ें। stackoverflow.com/a/36356629/5043867

— परदीप जैन

Answer 1

आप निम्नलिखित का उपयोग कर सकते हैं:

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

Comments

FillPipe वर्ग को पाइपट्रांसफॉर्म को लागू करना होगा

— toumir

हाँ तुम सही हो! यह बेहतर है ;-) इसे इंगित करने के लिए धन्यवाद। मैंने अपने उत्तर को उसी के अनुसार अपडेट किया ...

— थियरी टेम्पलर

पहले दृष्टिकोण में, मुझे लगता है कि आपके कहने का मतलब है arr=Array;?

— अब्दुल्रहमान अलसोघैर 16

क्या आप एक कोडपेन बना सकते हैं? यह काम नहीं करता है: self.parentView.context.arr एक कार्य नहीं है

— टूलकिट

पहले दृष्टिकोण के लिए धन्यवाद! मैं .fill (1) का उपयोग नहीं कर रहा हूं और काम कर रहा हूं;)

— gtamborero

Answer 2

<div *ngFor="let dummy of ' '.repeat(20).split(''), let x = index">

20अपने चर के साथ बदलें

Comments

यह निश्चित रूप से एक महान जवाब है

— 8

दोहराना 19 होना चाहिए; लंबाई-1।

— मर्ट मर्से

काफी असंबद्ध समस्या के लिए सुरुचिपूर्ण समाधान। लेकिन मुझे लगता है कि तत्वों की एक बड़ी संख्या के लिए इसका प्रदर्शन प्रभाव है?

— मार्टिन एकलेबेन ने

Answer 3

<ng-container *ngFor="let i of [].constructor(20)">🐱</ng-container>

उत्पन्न करता है 🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱

Comments

यह सही उत्तर होना चाहिए .. यह अब तक सबसे संक्षिप्त है!

— मंटिसिमो

त्रुटि सीमा: अमान्य सरणी लंबाई। यह तब दुर्घटनाग्रस्त होगा जब आकर्षित करने के लिए बिल्लियों की संख्या शून्य होगी।

— टॉम बेवलेंडर

वास्तव में उस सरल दृष्टिकोण की तरह!

— एफ। गेइलर

Answer 4

उपयोग किए गए अनुशंसित समाधानों के साथ दो समस्याएं हैं Arrays:

1. यह बेकार है। विशेष रूप से बड़ी संख्या के लिए।
2. आपको उन्हें कहीं न कहीं परिभाषित करना होगा जिसके परिणामस्वरूप इस तरह के एक सरल और आम ऑपरेशन के लिए बहुत अव्यवस्था होती है।

यह एक 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>

Answer 5

आप इसे अपने HTML में सरल कर सकते हैं:

*ngFor="let number of [0,1,2,3,4,5...,18,19]"

और अनुक्रमणिका के लिए चर "संख्या" का उपयोग करें।

Comments

ओपी ने कहा कि उन्होंने 20एक सदस्य चर को सौंपा है। इसलिए यह बहुत मदद नहीं करेगा

— phil294

क्या होगा अगर मैं 200 बार पुनरावृत्त करना चाहता हूं?

— चक्स

@ आप क्या नहीं कर सकते। :(

— मुहम्मद बिन युसरत

@Chax 200 में क्या गलत है? *ngFor="let number of [0,1,2,3,4,5...,199,200]":-D

— स्टैक अंडरफ्लो

@StackUnderflow दुख की बात है कि मुझे पात्रों द्वारा भुगतान नहीं किया गया है। यदि मैं था, तो मैं यह प्रचारित करूंगा कि यह एकमात्र तरीका है कि: पी (गंभीरता से अभी नहीं;))

— 15

Answer 6

एक सरल और पुन: प्रयोज्य समाधान शायद इस तरह कस्टम संरचनात्मक निर्देश का उपयोग करें।

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>

Comments

अधिक जानकारी के लिए: netbasal.com/...

— Ilyass Lamrani

Answer 7

इसे प्राप्त करने के लिए सबसे कुशल और संक्षिप्त तरीका एक पुनरावृत्ति उपयोगिता जोड़कर है। उपज मूल्यों को परेशान मत करो। NgFor निर्देश में एक चर सेट करने से परेशान न हों:

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

Answer 8

यदि आप लोडश का उपयोग कर रहे हैं , तो आप निम्न कार्य कर सकते हैं:

आयात Lodash अपने घटक में।

import * as _ from "lodash";

लॉडाश को संदर्भित करने के लिए घटक के भीतर एक सदस्य चर घोषित करें।

lodash = _;

तब आपके विचार में, आप रेंज फ़ंक्शन का उपयोग कर सकते हैं । 20 को आपके घटक के किसी भी चर से बदला जा सकता है।

*ngFor="let number of lodash.range(20)"

यह कहा जाना चाहिए कि दृश्य में फ़ंक्शन के लिए बाध्य करना महंगा हो सकता है, फ़ंक्शन की जटिलता पर निर्भर करता है जिसे आप चेंज डिटेक्शन के रूप में कॉल कर रहे हैं, फ़ंक्शन को बार-बार कॉल करेगा।

Answer 9

आपको अधिकांश उत्तरों में सुझाए गए सरणी को भरने की आवश्यकता नहीं है। यदि आप अपने ngForलूप में इंडेक्स का उपयोग करते हैं, तो आपको केवल सही लंबाई के साथ एक खाली सरणी बनाना होगा:

const elements = Array(n); // n = 20 in your case

और आपके विचार में:

<li *ngFor="let element in elements; let i = index">
  <span>{{ i }}</span>
</li>

Answer 10

सरल दृष्टिकोण:

एक हेल्पर को परिभाषित करें और उस गणना की लंबाई के साथ इसे गतिशील रूप से (या यदि आप चाहते हैं तो स्थिर करें) कि आप अपने HTML तत्वों को बनाना चाहते हैं। उदाहरण के लिए, मैं सर्वर से कुछ डेटा प्राप्त करना चाहता हूं और वापस आ गई सरणी की लंबाई के साथ तत्व बनाना चाहता हूं।

export class AppComponent {
  helperArray: Array<any>;

  constructor(private ss: StatusService) {
  }

  ngOnInit(): void {
    this.ss.getStatusData().subscribe((status: Status[]) => {
      this.helperArray = new Array(status.length);
    });
  }
}

फिर मेरे HTML टेम्पलेट में सहायक का उपयोग करें।

<div class="content-container" *ngFor="let i of helperArray">
  <general-information></general-information>
  <textfields></textfields>
</div>

Answer 11

इलियास लमरानी के संरचनात्मक निर्देश का थोड़ा सुधरा हुआ संस्करण है जो आपको अपने टेम्पलेट में सूचकांक का उपयोग करने की अनुमति देता है:

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

Answer 12

मुझे पता है कि आपने विशेष रूप से इसे * ngFor का उपयोग करके करने के लिए कहा था, लेकिन मैं एक संरचनात्मक निर्देश का उपयोग करके इसे हल करने के तरीके को साझा करना चाहता था:

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>

Answer 13

आप इसे बस उपयोग कर सकते हैं:

एचटीएमएल

<div *ngFor="let i of Count">

टीएस

export class Component implements OnInit {
  Count = [];

  constructor() {
    this.Count.length = 10; //you can give any number
  }

  ngOnInit(): void {}
}