0

我在 Firebase 中有一些记录，我想在我的 HTML 页面上显示这些记录。我附上了数据库的结构。现在，我想以数组的形式显示年份（可点击）。在选择特定年份时，我希望在我的代码中检索相应的记录。

我尝试检索年份，但无法在页面上显示它们。我尝试了一个静态数组，因为 years=["1999","1994"] 有效。只有来自数据库的数据没有被检索和显示。

<div class="list-group " *ngFor="let year of years">

    <a routerLink="records"  routerLinkActive="active" >
        <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>

</div>

export class NavigationComponent implements OnInit {
  @ViewChild('sidenav', {static: true}) sidenav: ElementRef;

  //years = ['1999', '2004', '2019'];
  clicked: boolean;
  resizedImage: Blob;

  years:AngularFireList<any[]>;
  // TODO: Need to fix the click effect of years





  constructor(af:AngularFireDatabase,
    private router: Router,

    //private userService: UserService
    //private ng2ImgMax: Ng2ImgMaxService
  ) {
    this.clicked = this.clicked === undefined ? false : true;
    this.years=af.list('/years/Akhilesh');}

那是打字稿代码^

数据库结构

4

1 回答 1

1

您的代码中有多个问题。

首先，由于您正在从使用静态数组转移到从数据库调用，您现在必须使用Observable会影响您的模板的 —— 您需要通过管道传递| async.

（为了演示，我将在示例中输出 JSON，您需要针对实际的对象结构进行调整）：

<div class="list-group" *ngFor="let year of years | async">
  {{ year | json }}
</div>

如果您需要更多关于这里发生的事情，请参阅Angular Tour of Heros 教程的这一部分。

接下来，您的声明years需要调整：

years: Observable<any>;

（理想情况下，您会使用芬兰表示法来命名 Observable，但为了与您的代码保持一致，我将省略它）。

当然，如果您还没有导入它，您还需要：

import { Observable } from 'rxjs';

最后，仅存储对象是不够的AngularFireList，您必须实际订阅更改。在这种情况下，我将使用snapshotChanges包含键在内的完整结构，但您也可以valueChanges根据需要查看。（要访问“1994”之类的键，您需要year.key在模板中使用 和snapshotChanges）。

    this.years=af.list('/years/Akhilesh').snapshotChanges();

我建议您仔细查看 AngularFire 文档中的示例。

于 2019-11-10T16:15:18.473 回答