Объясните проблему с приведённым выше кодом Angular компонента и как её исправить:

Условие

Объясните проблему с приведённым выше кодом Angular компонента и как её исправить:

@Component({
  selector: 'app-user',
  template: './user.component.html',
  stylesUrls: './user.component.scs',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CmfUserComponent {
  users$: any;

  constructor() {
    const api = new BackendService();
    this.users$ = api.getUsers();
  }
}

Ответ

Неверно заданы пути шаблона и стилей; сервис создаётся вручную вместо DI, а поток не типизирован. Для внешнего шаблона нужен templateUrl.

Минимальная правка при существующих BackendService и User:

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CmfUserComponent {
  readonly users$: Observable<User[]>;
  constructor(api: BackendService) {
    this.users$ = api.getUsers();
  }
}

Путь SCSS должен совпадать с реальным файлом. В шаблоне можно использовать AsyncPipe, подключив его через imports или модуль; он уведомляет OnPush-компонент об обновлениях. Сервис должен быть зарегистрирован в DI, а getUsers — иметь соответствующий тип.