It appears that Angular is not receiving the correct data type it expects, yet the lack of errors in the terminal is puzzling. However, the console output states:
https://i.stack.imgur.com/1xPsg.jpg
If the length property can be detected (highlighted in the image), why does it claim otherwise?
import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';
@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
clients!: Client[];
totalOwed!: number;
constructor(private clientService: ClientService) { }
ngOnInit() {
this.clientService.getClients()
.subscribe(clients => {
/* console.log(clients), reveals all clients in Firestore
and we can also console.log the length here as 3 */
console.log(clients.length);
this.clients = clients;
this.getTotalOwed();
});
}
}
Updated Question Details: It seems like I'm trying to access the length property within the template html section. How can this issue be resolved?
<!-- clients-component-html -->
<div class="row">
<div class="col-md-6">
<h2><i class = "fa fa-users"></i>Clients</h2>
</div>
<div class="col-md-6">
<h5 class="text-right text-secondary">Total Owed: {{totalOwed | currency: "USD": "symbol"}} </h5>
</div>
</div>
<table *ngIf="clients.length > 0; else noClients" class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>Name</th>
<th>Email</th>
<th>Balance</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{ client.firstName }} {{ client.lastName }}</td>
<td>{{ client.email }}</td>
<td>{{ client.balance | currency: "USD": "symbol"}}</td>
<td>
<a
routerLink="client/{{ client.id }}" class="btn btn-secondary btn-sm">
<i class="fa fa-arrow-circle-o-right"></i>
Details
</a>
</td>
</tr>
</tbody>
</table>
<ng-template #noClients>
<hr>
<h5>There are no clients in the system</h5>
</ng-template>