Typescript - условно создавать дубликаты элементов - PullRequest
Новая
       8

Typescript - условно создавать дубликаты элементов

0 голосов
/ 29 августа 2018

У меня есть переменная, которую пользователи моего приложения могут изменить, скажем: 

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, поэтому, пожалуйста, не беспокойтесь, если это довольно простой вопрос.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Это можно сделать с помощью протокола итератора.

HTML 

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

машинопись 

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;
  }
}
0 голосов
/ 29 августа 2018 
// 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>
...