ngFor over functions causes type error with Ivy #39634
Comments
|
Not really relevant.... but you should try to not call methods from the template.... Here is a fix though... functions = [ {{ fn }} |
AndrewKushnir
added
area: compiler
JoostK
added
P3
|
Confirmed as broken, but does not appear to be a (recent) regression. Latest 9.0.x and 9.1.x also produce the same error. |
|
Oh that's a surprise - sorry for the misinformation. This appeared as I was upgrading from 9.1 to 10! I'll update the description. |
@zero-1 Here are some possible work arounds for now until this is fixed, Workaround 1. export class AppComponent {
functions = [() => 1, () => 2];
}<p *ngFor="let fn of functions">
{{ fn.call(this) }}
</p>Workaround 2. export class AppComponent {
functions = [() => 1, () => 2];
eval(method: Function): number {
return method();
}
}<p *ngFor="let fn of functions">
{{ eval(fn) }}
</p> |
|
@AleksanderBodurri Nice ideas. Thank you, that workaround unblocks me for now! |
|
No worries. Another possible workaround that I missed, <p *ngFor="let fn of functions">
{{ (fn)() }}
</p> |
…te variables
Currently when we encounter an implicit method call (e.g. `{{ foo(1) }}`) and we manage to resolve
its receiver to something within the template, we assume that the method is on the receiver itself
so we generate a type checking code to reflect it. This assumption is true in most cases, but it
breaks down if the call is on an implicit receiver and the receiver itself is being invoked. E.g.
```
<div *ngFor="let fn of functions">{{ fn(1) }}</div>
```
These changes resolve the issue by generating a regular function call if the method call's receiver
is pointing to `$implicit`.
Fixes angular#39634.
…te variables
Currently when we encounter an implicit method call (e.g. `{{ foo(1) }}`) and we manage to resolve
its receiver to something within the template, we assume that the method is on the receiver itself
so we generate a type checking code to reflect it. This assumption is true in most cases, but it
breaks down if the call is on an implicit receiver and the receiver itself is being invoked. E.g.
```
<div *ngFor="let fn of functions">{{ fn(1) }}</div>
```
These changes resolve the issue by generating a regular function call if the method call's receiver
is pointing to `$implicit`.
Fixes angular#39634.
…te variables
Currently when we encounter an implicit method call (e.g. `{{ foo(1) }}`) and we manage to resolve
its receiver to something within the template, we assume that the method is on the receiver itself
so we generate a type checking code to reflect it. This assumption is true in most cases, but it
breaks down if the call is on an implicit receiver and the receiver itself is being invoked. E.g.
```
<div *ngFor="let fn of functions">{{ fn(1) }}</div>
```
These changes resolve the issue by generating a regular function call if the method call's receiver
is pointing to `$implicit`.
Fixes angular#39634.
…te variables (#39686) Currently when we encounter an implicit method call (e.g. `{{ foo(1) }}`) and we manage to resolve its receiver to something within the template, we assume that the method is on the receiver itself so we generate a type checking code to reflect it. This assumption is true in most cases, but it breaks down if the call is on an implicit receiver and the receiver itself is being invoked. E.g. ``` <div *ngFor="let fn of functions">{{ fn(1) }}</div> ``` These changes resolve the issue by generating a regular function call if the method call's receiver is pointing to `$implicit`. Fixes #39634. PR Close #39686
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
🐞 bug report
Affected Package
@angular/common, maybe? It's a compile-time error using nothing special except
*ngForIs this a regression?
This appeared as I was upgrading from Angular 9.1.0, though @JoostK below (#39634 (comment)) was able to reproduce it on the latest 9.0.x and 9.1.x.
Description
When looping over an array of functions using *ngFor, a strange typing error occurs when calling that function in the template. For example in this template it gives an error like the following:
You'll see that it somehow is trying to find
fnon the function itself? It works fine if you turn off Ivy.🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-ivy-vttvch?file=src/app/app.component.html
🔥 Exception or Error
🌍 Your Environment
Angular Version:
Anything else relevant?
Must be using ivy
The text was updated successfully, but these errors were encountered: