Find an issue and propose decision

users.component.html

<span>Total users: {{ (users$ | async).length }}</span>

<div *ngFor="let user of users$ | async">
  {{ user.firstName }} {{ user.lastName }}
</div>

users.components.ts

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import {UsersService} from '../users.service';

@Component({
  selector: 'hrh-users',
  templateUrl: './users.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersComponent implements OnInit {
  users$ = this.userService.getUsers();

  constructor(private readonly userService: UsersService) {}

  ngOnInit(): void {}
}

users.service.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {HttpClient} from '@angular/common/http';

export interface User {
  firstName: string;
  lastName: string;
}

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/users');
  }
}