String interpolation with angular not binding

Question

I'm trying to bind the data to a template using string interpolation. When I am trying to refer the variable in the template, then it returns the following error:

core.js:1350 ERROR TypeError: Cannot read property 'status' of undefined.

HTML code:

<div class="chat-main">
    <div class="col-md-12 chat-header rounded-top bg-primary text-white hide-chat-box">
        <div class="row">
            <div class="col-md-6 username pl-2">
                <h6 class="m-0">&nbsp;&nbsp; &nbsp;Tasks</h6>&nbsp;
                <span class="badge" style="background: red">{{ task?.status?.length }}</span>
            </div>
            <div class="col-md-6 options text-right pr-2">
                <i class="fa fa-window-minimize" aria-hidden="true"></i>
            </div>
        </div>
    </div>
    <div class="chat-content">
        <div class="col-md-12 chats border">
            <br/>
            <ul class="p-0" *ngFor="let task of tasksRes">
                <li class="pl-2 pr-2 text-dark send-msg mb-1">
                    <div>
                        <a href="javascript:;" [routerLink]="[task.link]" style="text-decoration: none !important;">
                            <span class="text-warning" *ngIf="task.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
                            <span class="text-success" *ngIf="task.status == 'Done'"><i class="fa fa-check"></i></span>
                            <span>&nbsp;&nbsp;{{ task.name }}</span>
                           </a>
                        <br/>
                        <span class="pull-right text-muted">{{task.createdDate | timeAgo}}</span>&nbsp;&nbsp;
                        <span class="text-muted">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{task.eventType}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

This has nothing to do with string interpolation. As the error suggests task doesn't exist. Try using *ngIf="task?.status == 'In_progress'"; — Baruch
– Baruch, Commented Aug 21, 2018 at 7:40
I am trying to bind above where the loop has already iterated. See here <span class="badge" style="background: red">{{ task?.status?.length }}</span> </div> then its not working... — youi
– youi, Commented Aug 21, 2018 at 7:44
@Baruch, the place where you mentioned is working fine. But i am referring the task?.status?.length above. So how can i fix? — youi
– youi, Commented Aug 21, 2018 at 7:45
@youi That doesn't work because it's outside the *ngFor so Angular doesn't recognize the variable. — Baruch
– Baruch, Commented Aug 21, 2018 at 7:47

Muhammed Albarmavi · Accepted Answer · 2018-08-21 08:20:02Z

2

task is local variable scope only inside ngFor template that mean ul element here

just move this span element to be inside `ngFor' template

<span class="badge" style="background: red">{{ task?.status?.length }}</span>

NgFor Local Variables

edited Aug 21, 2018 at 8:20

answered Aug 21, 2018 at 7:41

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

Collectives™ on Stack Overflow

String interpolation with angular not binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related