javascript - Stränginterpolering med angular bindar inte
Jag försöker binda datan till en mall med hjälp av stränginterpolering. När jag försöker referera variabeln i mallen, returnerar den följande fel:
core.js:1350 FEL TypeError: Kan inte läsa egenskapen 'status' av undefined.
HTML-kod:
<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"> Tasks</h6>
<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> {{ task.name }}</span>
</a>
<br/>
<span class="pull-right text-muted">{{task.createdDate | timeAgo}}</span>
<span class="text-muted"> {{task.eventType}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
Svar #1
task är en lokal variabel som endast gäller inom ngFor-mall, vilket betyder ul-elementet här
flytta bara detta span-element för att vara inne i `ngFor'-mallen
<span class="badge" style="background: red">{{ task?.status?.length }}</span>
NgFor lokala variabler
