CODEWITHSUNDEEP
angularfirebase
pyy
pyy

Reputation: 965

why my ngFor failed in async array

     <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

Upvotes: 1

Views: 476

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86740

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

Upvotes: 1

pyy
pyy

Reputation: 965

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

would solve this problem

Upvotes: 0

Related Questions