无法读取未定义 Angular 10 的属性“object.property”

Question

我很难理解 Angular 如何填充来自 observable 的对象，因为当我声明一个数组时，数组的对象及其属性会自动填充，并且它们在模板中是可读的。但是，当模板中只有一个对象要读取时，我无法读取对象的属性，即使我能够填充对象并使用console.log() 查看结果。

那么我应该如何调用我的对象来读取它在模板中的属性呢？

我确实尝试过使用接口，但结果是一样的。

这是我的代码：

export class DataTable {
  idSite!: number;
  idenseigne!: number;
  siteName!: string;
  enseigneName!: string;
}
export class FicheSiteComponent implements OnInit {

  idSite!: number;

  siteInfo: DataTable = new DataTable();

  constructor(private dataTableService : DataTableService
              , private route : ActivatedRoute){}

  ngOnInit(): void {
    let id = Number(this.route.snapshot.paramMap.get('id'))

    this.LoadInfo(id)
  }

  LoadInfo(id : number){
    this.dataTableService.fetchSiteById(id).subscribe(r => {
      this.siteInfo = r
      console.log(this.siteInfo)
    });
  }
}

这里是模板

<div  class="head" fxLayout="row wrap" fxLayoutAlign="space-between stretch">
  <div class="site">

    <h1>{{siteInfo.siteName}}</h1>
    <div class="headTitle">
      <h2>{{siteInfo.enseigneName}}</h2>
    </div>

  </div>
</div>

我在可观察到的请求中的结果，我可以在 console.log() 中看到

}
enseigneName: "3W"
idEnseigne: 1
idSite: 1
siteName: "3W The siteName"
}

Answer 1

在这种情况下，您可以使用接口：

export interface DataTable {
  idSite: number;
  idenseigne: number;
}

现在在你的 ts 文件中：

siteInfo: DataTable;