无法在角度2中向html渲染值

Question

我在我的组件中实现了这个代码，它基本上从数据库中获取数据。我可以console.log数据，我可以实际看到结果，我可以事件alert。但是当我在我的html中渲染它时，我不再看到它的价值了。请参阅下面的代码：

.TS

ngOnInit() {
    this.unitid = this.route.snapshot.paramMap.get('unitid');
    if (this.unitid === null) {
        this.router.navigate(['/main/viewproperties']);
    }
    this.getLessee();
    this.getLessor();
}

getLessor() {
    this.clientService.getUnitOwner(this.unitid)
        .subscribe((data: any) => {
          this.unitLessor = data;
          console.log(data);
          this.fname = this.unitLessor.FirstName;
          alert(this.fname);
        });
}

html的

<div *ngIf="fname">
   {{fname}}
</div>

以下是我console.log

的内容

我真的很感谢你的帮助。

Answer 1

如果param值发生变化，你可以使用router param再次启动ngOnInit（），当param有值时，它可以将值订阅到HTML中，你可以这样试试：

unitLessor: any; // declare model/entity here
ngOnInit() {
   this.route.params.forEach((params: Params) => {
      this.unitid = parseInt(params['unitid']);
      if (this.unitid) {
         this.getLessor(this.unitid); 
      }else{
          this.router.navigate(['/main/viewproperties']);
      }
      this.getLessee();
   }
 }

 getLessor(id: number) {
     this.clientService.getUnitOwner(id)
       .subscribe((data: any) => {
        this.unitLessor = data;
        console.log(data);
     });
 }

AND Html可能是：

   <div *ngIf="unitLessor">
       {{unitLessor.FirstName}}
   </div>
   OR
   <div *ngIf="unitLessor?.FirstName">
       {{unitLessor.FirstName}}
   </div>

Answer 2

这是一个变更检测问题。

import {ChangeDetectorRef} from '@angular/core';

constructor(private _cdr : ChangeDetectorRef){}


getLessor() {
    this.clientService.getUnitOwner(this.unitid)
        .subscribe((data: any) => {
          this.unitLessor = data;
          console.log(data);
          this.fname = this.unitLessor.FirstName;
          alert(this.fname);
          this._cdr.detectChanges();
        });
}