<p dir="auto">Repeating over a set of objects in a template throws a TypeError when attempting to call a method with the same name as a local variable. In this case looping over a list of "action" objects and dynamically generate buttons i.e.</p>
<p dir="auto">Edit: More concise example: <a href="https://plnkr.co/edit/QAygbyXHgseecK3xKTm9?p=preview" rel="nofollow">https://plnkr.co/edit/QAygbyXHgseecK3xKTm9?p=preview</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div #action&gt;
   &lt;!-- ... some markup ... --&gt;
   &lt;div class=&quot;nested&quot;&gt;
      &lt;button *ngFor=&quot;#thing of things&quot;
        (click)=&quot;thing.action($event)&quot;&gt;
        {{thing.label}}
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- ... some more markup ... --&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div #action&gt;
   &lt;!-- ... some markup ... --&gt;
   &lt;div class="nested"&gt;
      &lt;button *ngFor="#thing of things"
        (click)="thing.action($event)"&gt;
        {{thing.label}}
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- ... some more markup ... --&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">Original example: <a href="https://plnkr.co/edit/qIIz03Zq6R8iEGeCgP5N?p=preview" rel="nofollow">https://plnkr.co/edit/qIIz03Zq6R8iEGeCgP5N?p=preview</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button *ngFor=&quot;#action of actions&quot;
    (click)=&quot;action.action($event)&quot;&gt;{{action.label}}&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button *ngFor="#action of actions"
    (click)="action.action($event)"&gt;{{action.label}}&lt;/button&gt;
</code></pre></div>
<p dir="auto">Angular 2: 2.0.0-beta.12<br>
OS X: 10.11.2<br>
Chrome: 49.0.2623.87 (64-bit)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: l_action2_0 is not a function
    at AbstractChangeDetector.ChangeDetector_Comp_2.handleEventInternal (VM1171 viewFactory_Comp:355)
    at AbstractChangeDetector.handleEvent (VM1197 angular2.dev.js:9833)
    at AppView.triggerEventHandlers (VM1197 angular2.dev.js:10511)
    at eval (VM1750 viewFactory_Comp:579)
    at VM1197 angular2.dev.js:13979
    at VM1197 angular2.dev.js:13407
    at ZoneDelegate.invoke (VM1180 angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (VM1197 angular2.dev.js:2216)
    at ZoneDelegate.invoke (VM1180 angular2-polyfills.js:331)
    at Zone.runGuarded (VM1180 angular2-polyfills.js:241)"><pre class="notranslate"><code class="notranslate">TypeError: l_action2_0 is not a function
    at AbstractChangeDetector.ChangeDetector_Comp_2.handleEventInternal (VM1171 viewFactory_Comp:355)
    at AbstractChangeDetector.handleEvent (VM1197 angular2.dev.js:9833)
    at AppView.triggerEventHandlers (VM1197 angular2.dev.js:10511)
    at eval (VM1750 viewFactory_Comp:579)
    at VM1197 angular2.dev.js:13979
    at VM1197 angular2.dev.js:13407
    at ZoneDelegate.invoke (VM1180 angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (VM1197 angular2.dev.js:2216)
    at ZoneDelegate.invoke (VM1180 angular2-polyfills.js:331)
    at Zone.runGuarded (VM1180 angular2-polyfills.js:241)
</code></pre></div>
<p dir="auto">Looking at the transpiled code, it seems the issue appears to be in <code class="notranslate">CodeGenViewFactory</code> trying to reference the <code class="notranslate">action.action()</code>method as if it were the local variable <code class="notranslate">action</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="l_action0_0 = locals.get('action'); // &lt;- this is going to get your action object, {label: 'Method, action: Function}
l_event1_0 = locals.get('$event');  // &lt;- this gets the event that is going to be sent to your function, this case MouseClick
l_action2_0 = locals.get('action'); // &lt;- here is the problem, I think since action is the local template
                                    //    variable name the code gen generates a locals.get instead of function
                                    //    invocation, because the property has the same name and it gets lost
                                    //    (should be smart to see that is a invocation from the template local variable
                                    //    and not apply locals to get from ngFor context)"><pre class="notranslate"><code class="notranslate">l_action0_0 = locals.get('action'); // &lt;- this is going to get your action object, {label: 'Method, action: Function}
l_event1_0 = locals.get('$event');  // &lt;- this gets the event that is going to be sent to your function, this case MouseClick
l_action2_0 = locals.get('action'); // &lt;- here is the problem, I think since action is the local template
                                    //    variable name the code gen generates a locals.get instead of function
                                    //    invocation, because the property has the same name and it gets lost
                                    //    (should be smart to see that is a invocation from the template local variable
                                    //    and not apply locals to get from ngFor context)
</code></pre></div>
<p dir="auto">Changing the local variable name allows this case to work as expected</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="l_actionObj0_0 = locals.get('actionObj');
l_event1_0 = locals.get('$event');
l_action2_0 = l_actionObj0_0.action(l_event1_0);  // &lt;- looks good right because my local template variable is #actionObj"><pre class="notranslate"><code class="notranslate">l_actionObj0_0 = locals.get('actionObj');
l_event1_0 = locals.get('$event');
l_action2_0 = l_actionObj0_0.action(l_event1_0);  // &lt;- looks good right because my local template variable is #actionObj
</code></pre></div>
<p dir="auto">This is what it takes to set three query parameters as of beta.2:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    var params = new URLSearchParams();
    params.set('search', term);
    params.set('action', 'opensearch');
    params.set('format', 'json');"><pre class="notranslate"><code class="notranslate">    var params = new URLSearchParams();
    params.set('search', term);
    params.set('action', 'opensearch');
    params.set('format', 'json');
</code></pre></div>
<p dir="auto">That's tedious even if it does slavishly follow the <a href="https://url.spec.whatwg.org/#urlsearchparams" rel="nofollow">standard</a> for this class.</p>
<p dir="auto">It should be possible to write the following far more natural statement:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    var params = new URLSearchParams({
      search: term,
      action: 'opensearch',
      format: 'json'
    });"><pre class="notranslate"><code class="notranslate">    var params = new URLSearchParams({
      search: term,
      action: 'opensearch',
      format: 'json'
    });
</code></pre></div>
<p dir="auto"><em>Every</em> method that accepts a <code class="notranslate">URLSearchParams</code> object should also accept this representation.</p>
<p dir="auto">If a parameter value is multi-variate, the syntax should allow for array values instead of just strings.</p>
<p dir="auto">Every other reasonable HTTP api accepts this syntax. See, for example, the "data" property in <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">jQuery ajax</a>. The Angular 1 <code class="notranslate">$http</code> does it too as I recall.</p>