Html 从列表中获取所选项目

我的HTML页面上显示了一个元素列表。对于选择的任何元素，我都希望从firebase数据库检索相应的数据。 下面是我如何在HTML页面上显示列表的代码。这些项目是从firebase检索的

{{year.key}

我会使用两种服务

一个用于http调用（

apiService

），另一个用于在应用程序中存储数据（在这种情况下，

dataService

）

在您的实际

ts

years:any[] = []

//you can trigger that with ngOnInit or other events
this.apiService.getYears.subscribe(
  data => {
    this.dataService.setYears(data)
    this.years = this.dataService.getYears();
  }
)

在html中（不再使用

async

仅使用数据）

参考资料

---

你能澄清一下预期的行为是什么吗@TawfiekKhalaf我对这个问题进行了更详细的编辑。谢谢。在您的代码中，您正在路由到year+“which ever year”html页面…但我只有一个html页面..其中数据是基于year.key动态加载的。这只是一个组件，但如果您不想检索特定年份，则需要通过year、year key或year id（按您的意愿调用）您也可以将它们作为参数

记录？year=2015

传递，但它仍然是same@AkhileshPothuri我添加了一个回复

<div class="list-group " *ngFor="let year of years | async">
  <a [routerLink]="['records/'+ year.key]" routerLinkActive="active">
    <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>
</div>

year:any = undefined

//check for ActivatedRoute.params for retrieving the key (here `yearKey`) in your url

ngOnInit(){
  if (!(this.year = this.dataService.getYear(yearKey)))
    this.apiService.getYear(yearKey).subscribe(
      data => this.year = data
    )
}