Angular2: почему «else» не выполняется в функции подписки?

Question

Я пытаюсь проверить, совпадает ли поле электронного письма с письмом пользователя, вошедшего в систему.Когда я перехожу к URL-адресу (detail /: id), который был установлен другим пользователем и не принадлежит текущему вошедшему в систему пользователю, Angular должен отобразить сообщение об ошибке.

Пока все хорошо.Но в моем случае функция else для отображения правильного ответа не выполняется.Также console.log(appointmentDetails); не дает мне никакого вывода.

Я уже тестировал представление шаблона, когда инвертировал оператор if.Так что это будет работать.

ОБНОВЛЕНИЕ : appointmentDetails = [0]; делает меня смущенным.

Действительный ответ JSON:

{
  id: 241772331,
  firstName: "Justin",
  lastName: "Miller",
  email: "justin@miller.com", ...
} 

Ошибка ответа JSON:

{
  success: false,
  message: 'You are not authorized to edit this apoointment.'
}

Вид шаблона:

<div class="row show-hide-message" *ngIf="message">
  <div [ngClass]="messageClass">
    {{ message }}
  </div>
</div>

<div class="box">
  {{ appointmentDetails.type }}
  {{ appointmentDetails.firstName }}
  {{ appointmentDetails.lastName }}
</div>

AppointmentDetailComponent:

export class AppointmentDetailComponent implements OnInit {
  username = '';
  email = '';
  message;
  messageClass;
  getData: any;
  appointmentDetails = [0];
  id: number;
  private sub: any;

  constructor(
    private authService: AuthService,
    private apiService: ApiService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id']; // (+) converts string 'id' to a number
    });
    this.getData = this.getDataFunction;
    this.getData();
  }

  getDataFunction() {
    this.authService.getProfile().subscribe(profile => {
      this.username = profile.user.username; // Set username
      this.email = profile.user.email; // Set e-mail
      if (profile.user.email) {
        console.log(this.id);
        this.apiService
          .getAppointmentDetailsById(this.id, this.email)
          .subscribe(appointmentDetails => {
            if (!appointmentDetails.success) {
              this.messageClass = 'alert alert-danger'; // Set error bootstrap class
              this.message = appointmentDetails.message; // Set error message
            } else {
              console.log(appointmentDetails);
              this.appointmentDetails = appointmentDetails;
            }
          });
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Маршрут API сервера:

const url = process.env.acuityUri + '/appointments/' + id;
fetch(url)
  .then(response => response.json())
  .then(json => {
    if (json.email === user.email) {
      res.json(json);
    } else {
        res.json({
          success: false,
          message: 'You are not authorized to edit this apoointment.'
        });
      }
    });

Answer 1

Кажется, вы просто возвращаете два разных объекта в сценариях успеха и неудачи и не выдаваете никакой ошибки.Таким образом, вы должны выполнить проверку в первом блоке самого subscribe.Не нужно иметь блок error.Так что ищите property как условие

Итак, используйте

this.apiService
  .getAppointmentDetailsById(this.id, this.email)
  .subscribe(appointmentDetails => {
    if (appointmentDetails.hasOwnProperty('success') {
      this.messageClass = 'alert alert-danger'; // Set error bootstrap class
      this.message = appointmentDetails.message; // Set error message
    } else {
      console.log(appointmentDetails);
      this.appointmentDetails = appointmentDetails;
    }
  });

Answer 2

Попробуйте следующим образом,

this.apiService
  .getAppointmentDetailsById(this.id, this.email)
  .subscribe(appointmentDetails => {
      console.log(appointmentDetails);
      this.appointmentDetails = appointmentDetails;
    }, (error) => {
      this.messageClass = 'alert alert-danger'; // Set error bootstrap class
      this.message = error.message;
  });