Angular 6.0.5 - Невозможно получить доступ к свойству, которое там есть

Question

Я, по жизни, не могу понять, почему я не могу получить доступ к собственности на угловом 6 классе.Вот некоторый код:

@Component({
  selector: 'admin-badge-component',
  templateUrl: './badge.component.html'
})

export class AdminBadgeComponent implements OnInit {

    // Badge Object
    public badgeObject: IVisitorBadge = null;

    // On Init
    public ngOnInit() {
      this.route.params.subscribe((params) => {

      // Get Badge Object From API    
      this.visitorService.getVisitorBadge(params['aid'],params['vid'])
        .subscribe((response: IVisitorBadge) => {

          console.log(response);
          this.badgeObject = response;
        });
      });
    }
}

console.log выводит все данные, как и предполагалось:

{
  "id":2,
  "visit_id":325,
  "visitor_id":45,
  "created_at":"2018-09-29 15:00:10",
  "updated_at":"2018-09-29 15:00:10",
  "visitor": {
    ...
    "firstname": "matthew",
    "lastname": "brown",
    ...
  }
}

Однако, когда я иду к доступу и отображаю имя посетителя в моем шаблоне, используя следующуюкод:

<div>
  <h3>
    {{ badgeObject?.visitor?.firstname }} {{ badgeObject?.visitor?.lastname }}
  </h3>
</div>

Ничего не отображается.Если я пытаюсь получить доступ к свойствам напрямую без обозначения ?, я получаю cannot access 'firstname' of undefined.Даже если я оберну шаблон в *ngIf и сначала проверю свойство.Я также попытался установить и установить loadingBool, который получает значение false после получения ответа API, и использовать его в *ngIf по-прежнему ничего.

Вот снимок экрана полного класса: https://imgur.com/a/eEfCSL3

Answer 1

Нашел проблему.Выше не упоминается метод this.visitorService.getVisitorBadge, который я случайно установил responseType в text в вызове HttpClient.Сбросьте это значение до json, теперь оно работает.

Answer 2

  public constructor(private _change: ChangeDetectorRef) { }

  this.visitorService.getVisitorBadge(params['aid'],params['vid'])
    .subscribe((response: IVisitorBadge) => {
      this.badgeObject = response;
      this._change.markForCheck();
    });
  });

Вы должны сообщить детектору изменений, что компонент загрязнен, когда вы загружаете данные лениво.При первом отображении шаблона значение badgeObject равно null, но позже ему присваивается значение.

Используйте ChangeDetectorRef:

https://angular.io/api/core/ChangeDetectorRef