访问模型类实例说“未定义”

Question

我正在使用Angular服务从节点后端服务器获取数据，并且返回的数据很好。但是当我在组件的 ngOnInit（）方法中分配了来自服务的值后尝试访问Saloon实例时，问题就出现在了Angular组件中。

saloon.component.ts

import { Component, OnInit } from '@angular/core';
import { SaloonService } from '../../service/saloon.service';
import { Saloon } from '../../models/saloon.model';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-saloon',
  templateUrl: './saloon.component.html',
  styleUrls: ['./saloon.component.css']
})
export class SaloonComponent implements OnInit {


  saloon: Saloon;
  public saloonID;
  constructor(private _saloonService: SaloonService, private route: ActivatedRoute) {

  }

  ngOnInit() {

    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.saloonID = id;

    this._saloonService.getSaloonById(this.saloonID)
      .subscribe(
        data => {
          this.saloon = data;
          console.log(this.saloon.S01_Name);
        }
        ,
        (error) => console.log(error)
      );

  }

}

我的模型类是 saloon.model.ts

import { OnInit } from "@angular/core";

export class Saloon implements OnInit {

    S01_Name: string;
    S01_Status: number;
    S01_Adress: string;
    S01_Contact: string;
    approved: boolean;
    S01_Id: number;       


    constructor(S01_Id?: number, S01_Name?: string, S01_Status?: number, S01_Adress?: string, S01_Contact?: string) {

        this.approved = false;

        if (S01_Status == 1) {
            this.approved = true;
        } else {
            this.approved = false;
        }
        console.log("checkbox value: " + this.approved);

    }

    ngOnInit() {

    }

}

我得到的输出是

由于我是Angular 6的新手，所以任何人都可以帮我这个忙。
谢谢。