Angular 2 *ngFor поддерживает только добавление 10 элементов за раз во встроенный шаблон

Я хотел повторить определенный элемент несколько раз, поэтому я использую директиву *ngFor с жестко закодированным массивом, например [1,2,3,4,5,6,7,8,9,10], и это сработало потрясающе. Я добился того, что хотел сделать.

Код

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular App</h1>
      <div *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
          {{item}}: My Element 
      </div>`
})

Демонстрационный план

Но как только я увеличил размер массива более чем на 10, я начинаю получать ошибку ниже. Что действительно раздражает.

[email protected]?main=browser:355 Отклонение необработанного обещания: неподдерживаемое количество аргументов для чистых функций: 11 ; Зона: ; Задание: Promise.then ; Значение: Ошибка: Неподдерживаемое количество аргументов для чистых функций: 11(…) Ошибка: Неподдерживаемое количество аргументов для чистых функций: 11

Шаблон

<div *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11]">
  {{item}}
</div>`

Мне любопытно узнать, почему эта ошибка возникает, как только размер массива увеличивается более чем на 10? Но еще одна интересная вещь, когда я поместил тот же массив в компонент внутри переменной items= [1,2,3,4,5,6,7,8,9,10,11] и использовал items в *ngFor, и это сработало.

Есть ли причина такого особого случая? Простите меня, если я пропустил что-то простое/глупое.

Проблема Plunkr


person Pankaj Parkar    schedule 11.10.2016    source источник
comment
Привет, мне трудно выполнить эту задачу stackoverflow.com/a/41039141/3297613 . Вот демо plunkr plnkr.co/edit/B5ucnBONC55WTR3VnFBr?p=preview. В моем приложении есть общая служба, но я не знаю, как создать наблюдаемую в этой общей службе и заставить все остальные службы подписываться на эту конкретную наблюдаемую. Я просто хочу очистить все служебные данные после выхода пользователя из системы.   -  person Avinash Raj    schedule 17.04.2017


Ответы (1)


Это просто ограничение парсера шаблонов Angular2, чтобы избежать сложности парсера (по дизайну). В любом случае рекомендуется хранить данные в экземпляре компонента.

https://github.com/angular/angular/blob/d972d8235458a6e65819f96ee56da059ec76321b/modules/%40angular/compiler/src/view_compiler/util.ts#L82

person Günter Zöchbauer    schedule 11.10.2016
comment
могу ли я получить любую ссылку, в которой упоминается одно и то же, почему число только 10? - person Pankaj Parkar; 11.10.2016
comment
Я думаю, у меня это работает в бета-версии, возможно, команда что-то реорганизовала и что-то сломала: p - person Pankaj Parkar; 11.10.2016
comment
этого не должно быть, потому что у меня нет пайпа на моем лице. Может случиться так, что *ngFor неявно что-то делает - person Pankaj Parkar; 11.10.2016
comment
хорошо, я подожду еще 1 час, а затем я зарегистрирую эту проблему на странице github :) - person Pankaj Parkar; 11.10.2016
comment
Я просто немного небрежно прочитал информацию, которую вы предоставили. Я думаю, что мой первоначальный ответ остается в силе - как задумано. - person Günter Zöchbauer; 11.10.2016
comment
github.com/angular/angular /блоб/ - person Günter Zöchbauer; 11.10.2016