… 예를 들어 …
<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]
}
}
배열 생성에 대해서는이 링크를 참조하십시오 . JavaScript에서 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 = Array그의 4 예에서와 @ pardeep – 자이나교와 같은 구성 요소 타이프 라이터이다. 그리고 배열을 생성자 밖으로 가져올 필요가 new없기 때문에 없이 호출합니다 .newArray
Array(30)그리고 new Array(30)동등합니다.
배열은 비어있을 것입니다,하지만 당신은 정말 그냥 사용하기를 원하기 때문에이 문제가되지 않습니다 i에서 ;let i = index루프있다.
답변
아직 숫자 대신 모음을 사용하는 NgFor에 대한 방법은 없습니다. 현재 * ngFor는 모음을 매개 변수로만 허용하지만 다음 방법으로이를 수행 할 수 있습니다.
파이프 사용
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;
}
}
<ul>
<li>Method First Using PIPE</li>
<li *ngFor='let key of 5 | demoNumber'>
{{key}}
</li>
</ul>
HTML에서 직접 숫자 배열 사용 (보기)
<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);
}
}
}
답변
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);
}
간결성을 위해 오류 검사 및 어설 션이 생략되었습니다 (예 : 단계가 음수 인 경우 발생).
답변
당신은 또한 그렇게 사용할 수 있습니다
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>
답변
lodash를 사용할 수 있습니다 :
@Component({
selector: 'board',
template: `
<div *ngFor="let i of range">
{{i}}
</div>
`,
styleUrls: ['./board.component.css']
})
export class AppComponent implements OnInit {
range = _.range(8);
}
코드를 테스트하지 않았지만 작동해야합니다.
