Angular: получение независимых данных для каждого элемента в цикле ngFor - PullRequest
Новая
       4

Angular: получение независимых данных для каждого элемента в цикле ngFor

0 голосов
/ 22 мая 2018

Я новичок в Angular2 + и тестирую некоторый интерфейс.Для этого я хочу поместить случайное число в набор контейнеров, которые добавляются через ngFor: 

<div class="table-row" *ngFor="let row of [0,1,2,3,4,5,6]">
  <div class="table-cell">{{fakeData()}}</div>
  <div class="table-cell">{{fakeData()}}</div>
  <div class="table-cell">{{fakeData()}}</div>
  <div class="table-cell">{{fakeData()}}</div>
</div>

. В результате получается 6 строк с 4 столбцами, которые должны содержать временное число.

Когда я использовал fakeData = Math.floor(Math.random() * Math.floor(300));, он выдал одинаковое число для каждой ячейки.Когда я сделал это функцией (как выше), числа разные в каждой ячейке, но они постоянно меняются.Очевидно, что получение данных по каждой строке / ячейке пригодится, когда я начну извлекать и размещать здесь реальные данные.

Ответы [ 4 ]

0 голосов
/ 22 мая 2018

Я получил его работать следующим образом:

В вашем HTML: 

   <div class="table-row" *ngFor="let row of [0,1,2,3,4,5,6]">
        <div class="table-cell">{{fakeData()}}</div>
      </div>

В вашем файле .ts: 

 fakeData() {
    return  Math.floor(Math.random() * Math.floor(300));
  }
0 голосов
/ 22 мая 2018

Почему бы не использовать массив объектов?Ваши данные, вероятно, в конечном итоге будут едины.

myData = [
          {key1: 'val1', key2: 'val2', key3: 'val3', key4: 'val4'},
          {key1: 'val1', key2: 'val2', key3: 'val3', key4: 'val4'}
         ];

<div class="table-row" *ngFor="let obj of myData">
  <div class="table-cell">{{obj.key1}}</div>
  <div class="table-cell">{{obj.key2}}</div>
  <div class="table-cell">{{obj.key3}}</div>
  <div class="table-cell">{{obj.key4}}</div>
</div>
0 голосов
/ 22 мая 2018

Причина в том, что angular постоянно обновляет страницу, когда распознает изменения.

Чтобы решить вашу проблему, вы можете заполнить ваши данные массивом (возможно, двумерным массивом, который зависит от ваших потребностей) в ts, а затем вызвать ngFor в html.

0 голосов
/ 22 мая 2018

Когда вы вызываете функцию непосредственно из шаблона, она вызывается для каждого кадра.Таким образом, ваша функция fakeData () выполняет свою работу, давая вам новые случайные числа в каждом кадре

Я не знаю, почему вы хотите получить случайное число для каждой ячейки, но одна полезная вещь - это индекс * ngFor 

<div class="table-row" *ngFor="let row of [0,1,2,3,4,5,6]; index as i">
  <div class="table-cell">{{100*i + 1}}</div>
  <div class="table-cell">{{100*i + 2}}</div>
  <div class="table-cell">{{100*i + 3}}</div>
  <div class="table-cell">{{100*i + 4}}</div>
</div>

Это даст вам что-то вроде этого (ниже).Поскольку i (index) - это индекс цикла, который вы в данный момент выполняете

1 2 3 4 101 102 103 104 201 202 203 204 и т. Д.

...