Angular 2 - 집합 대신 숫자를 사용하기 위한 NgF

Angular 2 - 집합 대신 숫자를 사용하기 위한 NgF

예를 들어...

<div class="month" *ngFor="#item of myCollection; #i = index">
...
</div>

이런 일을 할 수 있을까요?

<div class="month" *ngFor="#item of 10; #i = index">
...
</div>

...다음과 같은 비우호적인 솔루션에 매력을 느끼지 못합니다.

<div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy',
'dummy','dummy','dummy']; #i = index">
...
</div>

?

구성 요소 내에서 아래 설명된 대로 숫자 배열(ES6)을 정의할 수 있습니다.

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
    this.numbers = Array(5).fill(4); // [4,4,4,4,4]
  }
}

어레이 생성에 대한 자세한 내용은 다음 링크를 참조하십시오.1에서 정수 배열을 만드는 테스터 방법.자바스크립트로 20.

은 이 에 그다이사반수있습다니복할여용하런를로 반복할 수 있습니다.ngFor:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of numbers">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

또는 짧게:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

@OP, 당신은 "우아하지 않은" 해결책에 매우 근접했습니다.

어때요?

<div class="month" *ngFor="let item of [].constructor(10); let i = index">
...
</div>

여기서 저는 그것을 받고 있습니다.Array: 빈 배 의생성자:[].constructor, 냐면왜Array템플릿 구문에서 인식되는 기호가 아닙니다. 그리고 저는 너무 게을러서 할 수 없습니다.Array=Array또는counter = Array4번째 예에서 @preteep-jain이 했던 것과 같은 구성 요소 유형 스크립트에서.그리고 나는 그것을 없이 부를 것입니다.newnew하지 않습니다.Array시공자

Array(30)그리고.new Array(30)동등합니다.

어레이는 비어 있지만, 사용자가 정말로 사용하기를 원하기 때문에 중요하지 않습니다.i;let i = index당신의 고리 안에.

주석에 응답하려면 편집:

Q. 변수를 사용하여 NgFor 루프의 길이를 설정하려면 어떻게 해야 합니까?

다음은 변수 열/행이 있는 테이블을 렌더링하는 방법에 대한 예제입니다.

<table class="symbolTable">
  <tr *ngFor="let f of [].constructor(numRows); let r = index">
    <td class="gridCell" *ngFor="let col of [].constructor(numCols); let c = index">
      {{gridCards[r][c].name}}
    </td>
  </tr>
</table>

export class AppComponent implements OnInit {
  title = 'simbologia';
  numSymbols = 4;
  numCols = 5;
  numRows = 5;
  guessCards: SymbolCard[] = [];
  gridCards: SymbolCard[][] = [];

  ngOnInit(): void {
    for (let c = 0; c < this.numCols; c++) {
      this.guessCards.push(new SymbolCard());
    }

    for (let r = 0; r < this.numRows; r++) {
      let row: SymbolCard[] = [];

      for (let c = 0; c < this.numCols; c++) {
        row.push(
          new SymbolCard({
            name: '' + r + '_' + c
          }))
      }
      this.gridCards.push(row);
    }
  }
}

NgFor 대신 숫자 컬렉션을 사용하는 방법은 아직 없습니다. 현재 *ngFor는 컬렉션을 매개 변수로만 허용하지만 다음 방법을 사용하여 이를 수행할 수 있습니다.

파이프 사용

demo-number.pipe.ts:

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value, args:string[]) : any {
    let res = [];
    for (let i = 0; i < value; i++) {
        res.push(i);
      }
      return res;
  }
}

최신 버전의 경우 가져오기를 변경하고 제거해야 합니다.args[]매개변수:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value) : any {
    let res = [];
    for (let i = 0; i < value; i++) {
        res.push(i);
      }
      return res;
  }
}

html:

<ul>
  <li>Method First Using PIPE</li>
  <li *ngFor='let key of 5 | demoNumber'>
    {{key}}
  </li>
</ul>

HTML(View)에서 숫자 배열을 직접 사용

<ul>
  <li>Method Second</li>
  <li *ngFor='let key of  [1,2]'>
    {{key}}
  </li>
</ul>

분할 방법 사용

<ul>
  <li>Method Third</li>
  <li *ngFor='let loop2 of "0123".split("")'>{{loop2}}</li>
</ul>

구성 요소에서 새 배열 만들기 사용

<ul>
  <li>Method Fourth</li>
  <li *ngFor='let loop3 of counter(5) ;let i= index'>{{i}}</li>
</ul>

export class AppComponent {
  demoNumber = 5 ;
  
  counter = Array;
  
  numberReturn(length){
    return new Array(length);
  }
}

#작업 데모

저는 구성 요소를 단순 반복하기 위해 배열을 할당하는 것을 참을 수 없어서 구조 지침을 작성했습니다.단순한 형태로는 인덱스를 템플릿에서 사용할 수 없습니다. 다음과 같습니다.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[biRepeat]' })
export class RepeatDirective {

  constructor( private templateRef: TemplateRef<any>,
             private viewContainer: ViewContainerRef) { }

  @Input('biRepeat') set count(c:number) {
    this.viewContainer.clear();
    for(var i=0;i<c;i++) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }
}

http://plnkr.co/edit/bzoNuL7w5Ub0H5MdYyFR?p=preview

당신은 또한 그렇게 사용할 수 있습니다.

export class SampleComponent {
   numbers:Array<any> = [];
   constructor() {
      this.numbers = Array.from({length:10},(v,k)=>k+1);
   }
}

HTML

<p *ngFor="let i of numbers">
   {{i}}
</p>

이는 다음과 같이 달성할 수도 있습니다.

HTML:

<div *ngFor="let item of fakeArray(10)">
     ...
</div>

유형 스크립트:

fakeArray(length: number): Array<any> {
  if (length >= 0) {
    return new Array(length);
  }
}

작업 데모

파이프를 사용하여 숫자를 배열로 변환합니다.

@Pipe({
  name: 'enumerate',
})
export class EnumeratePipe implements PipeTransform {
  transform(n: number): number[] {
    return [...Array(n)].map((_,i) => i);
  }
}

그런 다음 템플릿의 파이프를 사용합니다.

<p *ngFor="let i of 5 | enumerate">
   Index: {{ i }}
</p>

https://stackblitz.com/edit/angular-ivy-pkwvyw?file=src/app/app.component.html

Angular 5.2.6과 TypeScript 2.6.2를 사용하여 다음과 같이 해결했습니다.

class Range implements Iterable<number> {
    constructor(
        public readonly low: number,
        public readonly high: number,
        public readonly step: number = 1
    ) {
    }

    *[Symbol.iterator]() {
        for (let x = this.low; x <= this.high; x += this.step) {
            yield x;
        }
    }
}

function range(low: number, high: number) {
    return new Range(low, high);
}

다음과 같은 구성요소에서 사용할 수 있습니다.

@Component({
    template: `<div *ngFor="let i of r">{{ i }}</div>`
})
class RangeTestComponent {
    public r = range(10, 20);
}

오류 확인 및 간결함을 위해 의도적으로 생략된 주장(예: 단계가 음수인 경우 발생하는 작업).

로다쉬를 사용할 수 있습니다.

@Component({
  selector: 'board',
  template: `
<div *ngFor="let i of range">
{{i}}
</div>
`,
  styleUrls: ['./board.component.css']
})
export class AppComponent implements OnInit {
  range = _.range(8);
}

나는 코드 테스트를 하지 않았지만 작동할 것입니다.

<div *ngFor="let number of [].constructor(myCollection)">
    <div>
        Hello World
    </div>
</div>

이것은 내 컬렉션에 있는 횟수만큼 반복할 수 있는 쉽고 빠른 방법입니다.

그래서 만약 내 컬렉션이 5라면 헬로 월드는 5번 반복될 것입니다.

내 구성요소.ts

numbers: number[] = [];

constructor() {
  this.numbers = new Array<number>(10)
}

My-component.html

<div *ngFor="let num of numbers; let i = index">{{ i }}</div>

인수가 없는 fill() 방법(승인된 답변에 언급됨)이 오류를 던지기 때문에, 저는 다음과 같은 것을 제안하고 싶습니다(나에게 효과가 있음, Angular 7.0.4, Typescript 3.1.6).

<div class="month" *ngFor="let item of items">
...
</div>

구성 요소 코드:

this.items = Array.from({length: 10}, (v, k) => k + 1);

색인과 함께 사용자 지정 구조 지시문 사용:

각도 설명서에 따름:

createEmbeddedView내장된 보기를 인스턴스화하여 이 컨테이너에 삽입합니다.

abstract createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef.

Param          Type           Description
templateRef    TemplateRef    the HTML template that defines the view.
context        C              optional. Default is undefined.
index          number         the 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.

각도가 createEmbeddedView를 호출하여 템플릿을 만들 때 내부에서 사용할 컨텍스트도 전달할 수 있습니다.ng-template.

컨텍스트 선택적 매개 변수를 사용하면 *ngFor에서와 마찬가지로 구성 요소에서 이 매개 변수를 사용하여 템플릿 내에서 추출할 수 있습니다.

app.component.vmdk:

<p *for="number; let i=index; let c=length; let f=first; let l=last; let e=even; let o=odd">
  item : {{i}} / {{c}}
  <b>
    {{f ? "First,": ""}}
    {{l? "Last,": ""}}
    {{e? "Even." : ""}}
    {{o? "Odd." : ""}}
  </b>
</p>

for.sys.ts:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

class Context {
  constructor(public index: number, public length: number) { }
  get even(): boolean { return this.index % 2 === 0; }
  get odd(): boolean { return this.index % 2 === 1; }
  get first(): boolean { return this.index === 0; }
  get last(): boolean { return this.index === this.length - 1; }
}

@Directive({
  selector: '[for]'
})
export class ForDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }

  @Input('for') set loop(num: number) {
    for (var i = 0; i < num; i++)
      this.viewContainer.createEmbeddedView(this.templateRef, new Context(i, num));
  }
}

버튼을 클릭한 후 어레이의 크기를 동적으로 늘리려면 첨부된 내 다이내믹 솔루션을 확인하십시오(이렇게 질문에 대답했습니다).

필요한 변수의 할당:

  array = [1];
  arraySize: number;

배열에 요소를 추가하는 함수를 선언합니다.

increaseArrayElement() {
   this.arraySize = this.array[this.array.length - 1 ];
   this.arraySize += 1;
   this.array.push(this.arraySize);
   console.log(this.arraySize);
}

HTML에서 함수 호출

  <button md-button (click)="increaseArrayElement()" >
      Add element to array
  </button>

ngFor를 사용하여 어레이를 통해 반복:

<div *ngFor="let i of array" >
  iterateThroughArray: {{ i }}
</div>

내가 시도한 가장 간단한 방법은

구성 요소 파일에 배열을 생성하고 배열로 반환하여 *ngFor 디렉티브로 호출할 수도 있습니다.

이런 것들...

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-morning',
  templateUrl: './morning.component.html',
  styleUrls: ['./morning.component.css']
})
export class MorningComponent implements OnInit {

  arr = [];
  i: number = 0;
  arra() {
    for (this.i = 0; this.i < 20; this.i++) {
      this.arr[this.i]=this.i;
    }
    return this.arr;
  }

  constructor() { }

  ngOnInit() {
  }

}

그리고 이 기능은 당신의 html 템플릿 파일에서 사용할 수 있습니다.

<p *ngFor="let a of arra(); let i= index">
value:{{a}} position:{{i}}
</p>

Angular를 위한 꽤 깨끗하고 간단한 것은 다음과 같습니다.

.ts에서:

max = 10;    

.html에서:

<div *ngFor="let dummy of ','.repeat(max).split(','); index as ix">
   - {{ix + 1}}:
</div>

간단하고 간단한 해결책이 여기에 있다고 생각합니다.

my.component.ts 파일

setArrayFromNumber(i: number) {
  return new Array(i);
}

my.component.html 파일

<li *ngFor='let in of setArrayFromNumber(5); let i = index'>{{ i }}</li>

바로 그거야!

언급URL : https://stackoverflow.com/questions/36354325/angular-2-ngfor-using-numbers-instead-collections