Angular2：为什么在订阅函数中未执行'else'？

Question

我正在尝试验证响应电子邮件字段是否与登录用户的电子邮件匹配。当我导航到另一个用户设置但不属于当前登录用户的URL（detail /：id）时，Angular应显示一条错误消息。

到目前为止很好。但就我而言，显示正确响应的else函数没有执行。 console.log(appointmentDetails);也没有任何输出。

我在反转if语句时已经测试了模板视图。这样就可以了。

UPDATE：appointmentDetails = [0];使我感到困惑。

有效JSON响应：

{
  id: 241772331,
  firstName: "Justin",
  lastName: "Miller",
  email: "[email protected]", ...
} 

错误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;
  });