Angular 2 - Ng使用数字代替集合

Question

...例如...

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

？

Answer 1

在组件中,您可以定义一个数字数组(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 {
  (...)
}

Answer 2

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>

使用Split方法

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

工作演示

Answer 3

@OP,你非常接近你的"非优雅"解决方案.

怎么样:

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

在这里,我Array从一个空数组中得到构造函数:[].constructor因为Array在模板语法中不是一个可识别的符号,而且我太懒了,Array=Array或者counter = Array像@ pardeep-jain这样的组件打字稿在他的第四个例子中做了.我正在调用它,new因为new没有必要从Array构造函数中获取数组.

Array(30)并且new Array(30)是等价的.

数组将是空的,但是这并不重要,因为你真的只是想用i来自;let i = index于你的循环.

Answer 4

我无法承受为明确重复组件分配数组的想法,所以我编写了一个结构指令.在最简单的形式中,这不会使索引可用于模板,它看起来像这样:

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

Answer 5

使用管道将数字转换为数组。

@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

Answer 6

你也可以这样使用

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>

Answer 7

我使用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);
}

为简洁起见，故意省略了错误检查和断言（例如，如果步骤为负，会发生什么）。

Answer 8

这也可以这样实现：

HTML：

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

打字稿：

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

工作演示