打字稿 - 有条件地创建重复元素答案

【问题标题】：Typescript - Conditionally create duplicate elements打字稿 - 有条件地创建重复元素
【发布时间】：2018-08-28 21:58:07
【问题描述】：

我有一个变量，我的应用程序的用户可以修改它，比如：

let myValue = 3;

在我的 html 中，我希望创建与变量值一样多的元素副本。

在我的例子中，myValue is 3，然后我们创建 div 元素 3 次。

<div>I am a duplicate.</div>
<div>I am a duplicate.</div>
<div>I am a duplicate.</div>

myValue 也可以是更高或更低的数字。不管它是什么，我都希望我的元素有那么多副本。我怎样才能做到这一点？

附：我还是 Angular 和 Typescript 的新手，所以如果这是一个相当简单的问题，请不要对我太苛刻。

【问题讨论】：

你可以使用ngFor并遍历一个长度基于myValue的数组

标签： html angular typescript duplicates element

【解决方案1】：

// creates an array in TS file based on myValue
duplicates = Array(myValue).fill(null).map( (x,index) => index );


// use ngFor in HTML 
<div ngFor="let duplicate of duplicates">
  <div>I am a duplicate. {{ duplicate }}</div>
</div>

【讨论】：

【解决方案2】：

这可以使用迭代器协议来完成。

HTML

<ol>
  <li *ngFor="let i of value">{{ i }}</li>
</ol>

TypeScript

export class AppComponent {
  title = 'app';
  _value = 3;
  get value(){
    let iterable = {
      length: this._value,
      index: 0,
      next: () => {
        if (iterable.index < iterable.length) {
         return {value: iterable.index++, done: false};
       } else {
         iterable.index = 0;
         return {done: true};
       }
     },
      [Symbol.iterator]: function() { return this }
    };
    return iterable;
  }
}

【讨论】：