Угловой: тип Observable <boolean> не имеет совместимых сигнатур вызовов

Я все еще изучаю angular, и я хочу создать сервис с логическим наблюдаемым и подписаться на этот наблюдаемый.

Я следовал этому руководство, потому что я действительно хочу скрыть навигационные ссылки меню, когда пользователь не вошел в систему, и этот учебник почти такой же.

Итак, в моей службе входа в систему:

export class LoginService {

  private loggedIn = new BehaviorSubject<boolean>(false);

  get isLoggedIn() {
    console.info(this.loggedIn);
    return this.loggedIn.asObservable();
  }

  constructor(
    public http: Http,
    public utilsService: UtilsService) { }

  public login(credentials: Credentials): Observable<Response> {
    // login code
    // if user succeed login then:
    this.loggedIn.next(true);
  }

  public logout(): Observable<Response> {
    // logout code
    // if user succeed logout then:
    this.loggedIn.next(false);
  }
}

и в своем компоненте я использую эту функцию

public isLoggedIn: boolean;

userIsLoggedIn() {

  this._login.isLoggedIn().subscribe(
    ((res: boolean) => {
        console.info(res);
        this.isLoggedIn = res;
    })
  );

}  // <- this is (36,5) position returned from error log

Если все в порядке, то при использовании простого *ngIf = "isLoggedIn" в навигационных ссылках шаблона компонента он должен работать. Но что-то не так, и я получаю следующую ошибку при попытке компиляции.

ERROR in /project-folder/src/app/shared/navbar/navbar.ts (36,5): Cannot invoke an expression whose type lacks a call signature. Type 'Observable' has no compatible call signatures.

Понятия не имею, что случилось. Но как новичок я должен сказать, что я не очень хорошо знаю, что такое BehaviorSubject, и не нашел хорошей и простой для понимания документации по нему.

Это должно быть легко, но после нескольких дней безуспешных попыток я почти перестал скрывать ссылки для незарегистрированных пользователей.

Обновлено: Я добавляю часть package.json, чтобы показать используемые версии:

"devDependencies": {
  "@angular/cli": "1.4.5",
  "@angular/compiler-cli": "4.4.4",
  "@angular/language-service": "4.4.4",
  "@types/node": "6.0.60",
  "codelyzer": "3.2.0",
  // some of the dependencies omitted
  "gulp": "3.9.1",
  "gulp-coveralls": "0.1.4",
  "typescript": "2.3.3"
}

Какую версию Angular вы используете? Поскольку я вижу public http: Http, и теперь Angular рекомендую использовать http: HttpClient, как описано здесь: https://angular.io/guide/http

Johan Rin 08.12.2018 21:11

Я добавил часть package.json, чтобы показать используемые версии

Alex 08.12.2018 21:20

Почему вы используете эту устаревшую версию angular 4, если последняя версия - Angular 7?

Roman Šimík 08.12.2018 21:27

Я получил это веб-приложение в университете, чтобы учиться и учиться. Я не могу его обновить, и мне нужно использовать то, что я получил. Не мой выбор. Есть несколько частей, которые уже разработаны и работают нормально. Теперь мне нужно внести некоторые изменения, и я не могу, потому что я получаю эту ошибку из своего кода.

Alex 08.12.2018 21:32
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
4
5 688
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы определяете isLoggedIn как имущество с помощью этого получателя:

  get isLoggedIn() {
    console.info(this.loggedIn);
    return this.loggedIn.asObservable();
  }

Но тогда вы называете это как функция:

  this._login.isLoggedIn().subscribe(
    ((res: boolean) => {
        console.info(res);
        this.isLoggedIn = res;
    })
  );

Вместо этого вам нужно получить доступ к нему как к свойству:

  this._login.isLoggedIn.subscribe(  // No () here
    ((res: boolean) => {
        console.info(res);
        this.isLoggedIn = res;
    })
  );

Большое спасибо! это очевидно, но я не мог этого видеть и потерял на это много времени. Теперь работает отлично. Спасибо.

Alex 08.12.2018 21:51

Другие вопросы по теме