Angular 2 *ngFor only supports to add 10 elements at a time in inline template

[pankajparkar]

**I'm submitting a bug.

[x ] bug report
[ ] feature request
[ ] support request

Current behavior

I wanted to repeat particular element several amount of time, so I'm using *ngFor directive with hard-coded array like [1,2,3,4,5,6,7,8,9,10] and that got worked awesome. I achieved what I wanted to do.

Code

@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>`
})

[Demo Plunkr][1]

But as soon as I increased the array size more than 10, I start getting below error. Which is really annoying.

zone.js@0.6.25?main=browser:355 Unhandled Promise rejection:
Unsupported number of argument for pure functions: 11 ; Zone: ;
Task: Promise.then ; Value: Error: Unsupported number of argument for
pure functions: 11(…) Error: Unsupported number of argument for pure
functions: 11

Template

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

Expected behavior

I'm curious to know why that error is happening as soon as array size increase more than 10? But another interesting thing is when I put the same array in component inside variable items= [1,2,3,4,5,6,7,8,9,10,11] and used items in *ngFor and it got worked.

• Angular version: 2.0.1

• Browser: all

• Language: TypeScript

[mxii]

Your plunker link is missing, here is another one: https://plnkr.co/edit/CNLlqxAfk7xHDvra8pZG?p=preview

I don't know why there is this limit (10), but its caused by this function: createPureProxy

angular/modules/@angular/compiler/src/view_compiler/util.ts

Lines 82 to 93 in d972d82

	export function createPureProxy(
	fn: o.Expression, argCount: number, pureProxyProp: o.ReadPropExpr, view: CompileView) {
	view.fields.push(new o.ClassField(pureProxyProp.name, null));
	var pureProxyId =
	argCount < Identifiers.pureProxies.length ? Identifiers.pureProxies[argCount] : null;
	if (!pureProxyId) {
	throw new Error(`Unsupported number of argument for pure functions: ${argCount}`);
	}
	view.createMethod.addStmt(o.THIS_EXPR.prop(pureProxyProp.name)
	.set(o.importExpr(resolveIdentifier(pureProxyId)).callFn([fn]))
	.toStmt());
	}

Which checks this array: pureProxies

angular/modules/@angular/compiler/src/identifiers.ts

Lines 191 to 203 in d972d82

	static pureProxies = [
	null,
	{name: 'pureProxy1', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy1},
	{name: 'pureProxy2', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy2},
	{name: 'pureProxy3', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy3},
	{name: 'pureProxy4', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy4},
	{name: 'pureProxy5', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy5},
	{name: 'pureProxy6', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy6},
	{name: 'pureProxy7', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy7},
	{name: 'pureProxy8', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy8},
	{name: 'pureProxy9', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy9},
	{name: 'pureProxy10', moduleUrl: VIEW_UTILS_MODULE_URL, runtime: pureProxy10},
	];

Maybe someone from Angular team can explain it.. :)

[pankajparkar]

@mxii Thanks for your response 👍 I already saw that code(forgot to mention in description), but there I can't find a reason why it allow array with 10 size.

[skreborn]

Identifiers.pureProxies is defined here. There have been numerous discussions regarding this in the past, most notably here.

joeherold: i get an error, if my NgClass object has more than 11 items
[...]
robwormald: i think there's a hard limit of 10, mostly for performance reasons

Based on this, I'd say that this is by design, and should not be considered a bug. Hope this helps.

[manklu]

And the workaround is easy in this case.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div *ngFor="let item of items">
        {{item}}
      </div>
    </div>
  `
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }

  items = [1,2,3,4,5,6,7,8,9,10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
}

[pankajparkar]

@manklu Thanks. I already knew and same thing I mentioned in my OP.

[DzmitryShylovich]

I believe it was fixed here #12710

[vicb]

@DzmitryShylovich 12710 is only about interpolations. The root cause is different here.

[devAmit14]

any updates on this issue? I'm also stuck.

[pankajparkar]

@devAmit14 You can easily shift your declaration/assignment logic from html to component directly(refer @manklu comment.). This also considered as best practice and would make your component testable & html as readable.

[devAmit14]

I have a situation like -

<table class="table"> <thead> <tr> <th *ngFor="let name of columns">{{ name }}</th> </tr> </thead> <tbody> <tr *ngFor="let row of rows"> <td *ngFor="let name of columns"> {{ row[name] }} </td> </tr> </tbody> </table>

for static data the table is rendered, but when I get those from an ajax GET, the table isn't bound. no errors at console as well. Any directions?

[pankajparkar]

@devAmit14 add plunkr with reproducible problem in it, that way I could help you to solve your issue, Thanks :)