why my ngFor failed in async array

Question

     <div class="panel-body">
         {{ (currentPlatformProfile | async)?.length }} <!-- line 1 -->
         <table>
             <tr *ngFor="let platform of {{(currentPlatformProfile | async)}}">
                     <td>{{platform.infoPlatform}}</td>
                     <td>{{platform.infoGameId}}</td>
                     <td>{{platform.infoChannel}}</td>
             </tr>
         </table> 
 </div>

my html code is in the snippet, in fact line 1 work correctly, but in the ngFor it failed with

How could I make use of this array?

Unhandled Promise rejection: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined (" {{ (currentPlatformProfile | async) }} ]*ngFor="let platform of {{(currentPlatformProfile | async)}}"> {{plat"): ng:///AppModule/ProfilecreateComponent.html@130:24 Can't bind to '*ngFor' since it isn't a known property of 'tr'.

Blockquote

Pardeep Jain · Accepted Answer · 2017-04-08 06:52:46Z

1

have you this ?

<tr *ngFor="let platform of currentPlatformProfile">
         <td>{{platform?.infoPlatform}}</td>
         <td>{{platform?.infoGameId}}</td>
         <td>{{platform?.infoChannel}}</td>
 </tr>

also in you class assign currentPlatformProfile = [] while defining , and use safe operator (?) in template for avoiding errors.

not working why ? *ngFor="let platform of {{(currentPlatformProfile | async)}}"

because you cannot use interpolation syntax ({{}}) inside angular syntax

answered Apr 8, 2017 at 6:52

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pyy Over a year ago

I have solve this problem in the following, but you provide an another solution, anyway, thanks.

Pardeep Jain Over a year ago

Your welcome, anyways which solution you choose may i know ?

pyy Over a year ago

@ Pardeep Jain I apply the below solution answered by myself, but your answer is definitely in deeper level.

Pardeep Jain Over a year ago

Ohh great self answered , glad to hear about my answer :)

pyy · Accepted Answer · 2017-04-08 04:00:11Z

0

<tr *ngFor="let platform of currentPlatformProfile | async">

would solve this problem

answered Apr 8, 2017 at 4:00

pyy

9653 gold badges9 silver badges28 bronze badges

Collectives™ on Stack Overflow

why my ngFor failed in async array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related