Angular 2: 각 루프가 아닌 for 루프를 작성하는 방법

Angular 2: 각 루프가 아닌 for 루프를 작성하는 방법

Angular 2를 사용하여 템플릿에서 선을 여러 번 복제하려고 합니다.물체 위에서 반복하는 것은 쉽습니다.*ngFor="let object of objects"하지만, 저는 간단한 것을 실행하고 싶습니다.for루프가 아닌foreach루프. (의사 코드)와 같은 것.

{for i = 0; i < 5; i++}
  <li>Something</li>
{endfor}

어떻게 해야 하나요?

렌더링할 시간의 배열을 동적으로 생성할 수 있습니다.<li>Something</li>그리고 나서 하라.ngFor그 컬렉션 위에.또한 당신은 사용할 수 있습니다.index현재 요소의.

마크업

<ul>
   <li *ngFor="let item of createRange(5); let currentElementIndex=index+1">
      {{currentElementIndex}} Something
   </li>
</ul>

코드

createRange(number){
  // return new Array(number);
  return new Array(number).fill(0)
    .map((n, index) => index + 1);
}

여기서 데모

후드 각이 제거된 후드 아래에서*ngFor에 대한 구문.ng-template판본

<ul>
    <ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">
      {{currentElementIndex}} Something
    </ng-template>
</ul>

지정된 수의 항목을 사용하여 빈 배열을 인스턴스화할 수 있습니다.int에게Array생성자를 사용하여 반복합니다.ngFor.

구성 요소 코드:

export class ForLoop {
  fakeArray = new Array(12);
}

템플릿에서:

<ul>
  <li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>

인덱스 속성은 반복 번호를 제공합니다.

라이브 버전

원하는 루프의 길이에 따라 더 "템플릿 기반" 솔루션이 될 수 있습니다.

<ul>
  <li *ngFor="let index of [0,1,2,3,4,5]">
    {{ index }}
  </li>
</ul>

를 사용하면 둘 다 하나로 할 수 있습니다.index

<div *ngFor="let item of items; let myIndex = index>
  {{myIndex}}
</div>

이것으로 두 가지 장점을 모두 얻을 수 있습니다.

더 나은 방법은 구성 요소에 가짜 배열을 만드는 것입니다.

구성요소:

fakeArray = new Array(12);

템플릿 내:

<ng-container *ngFor = "let n of fakeArray">
     MyCONTENT
</ng-container>

여기 플렁크르

사용할 수 있습니다._.range([optional] start, end)시작(포함)부터 끝(전용)까지 숫자 간격이 포함된 새 Miniated 목록을 만듭니다.여기서 저는 lodash.js를 사용합니다.._range()방법.

예:

코드

var dayOfMonth = _.range(1,32);  // It creates a new list from 1 to 31.

//HTML 이제 For 루프에서 사용할 수 있습니다.

<div *ngFor="let day of dayOfMonth">{{day}}</div>

내가 여기서 찾은 이 질문에 대한 최고의 대답입니다.

클래스 내부에 속성을 생성하고 Array 개체를 참조해야 합니다.

export class SomeComponent {
  Arr = Array; //Array type captured in a variable
  num:number = 20;
}

HTML 내부에서 다음을 사용할 수 있습니다.

<ul id="next-pages">
    <li class="line" *ngFor="let _ of Arr(10)">&nbsp;</li>
</ul>

   queNumMin = 23;
   queNumMax= 26;
   result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
         this.result = index
         console.log( this.result);
     }

범위 최소값 및 최대값

예를 들어, myArray라는 어레이를 반복하려면 이 어레이를 사용해야 합니다.

<ul>
  <li *ngFor="let array of myArray; let i = index">{{i}} {{array}}</li>
</ul>

이렇게 간단한 방법으로 할 수 있습니다.

<div *ngFor="let i of ('a,'.repeat(100).split(','))">
    .....
</div>

('a,'.repeat(100).split(','))--> 그것은 연결된 긴 문자열을 구성하는 것을 의미합니다.a,100번을 반복한 후 다음으로 나눕니다.,결과는 100개의 항목 배열로 나타납니다.ngFor100번 픽업 및 반복합니다.

1.예: "ng g p range"와 같은 파이프 생성

transform(length: number):any[]{
        return new Array(length);
    }

2.in html

 <div *ngFor="let _ of (12|range)" >  ...   </div>

i번째 용어의 개체를 사용하고 각 반복에서 다른 구성 요소에 입력하려면 다음을 수행합니다.

<table class="table table-striped table-hover">
  <tr>
    <th> Blogs </th>
  </tr>
  <tr *ngFor="let blogEl of blogs">
    <app-blog-item [blog]="blogEl"> </app-blog-item>
  </tr>
</table>

여러 번 줄을 중복하려는 경우.

간단하게 할 수 있습니다.

.ts 파일로 선언

public repeater = "<li>Something</li>";

그런 다음 다음 .html 파일을 인쇄합니다.

{{repeater.repeat(5)}}

언급URL : https://stackoverflow.com/questions/36095496/angular-2-how-to-write-a-for-loop-not-a-foreach-loop