Typescript

Question

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

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 也可以是更大或更小的数字。不管是什么，我都希望我的元素有那么多副本。我怎样才能做到这一点？

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

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

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

Typescript - 有条件地创建重复元素

Typescript - Conditionally create duplicate elements

html

element

duplicates

angular