Возвращение ключа $ в AngularFire 5

Question

У меня есть следующий код, который работает с AngularFire 5:

export class NavigationComponent {
    items: Observable<any[]>;
    constructor(db: AngularFireDatabase) {
        this.items = db.list('/pages', ref => {
            let query = ref.limitToLast(100).orderByChild('sortOrder');
            return query;
        }).valueChanges();
    }
}

Но теперь нужно вернуть item.$key, который, по-видимому, больше не возвращается по умолчанию в AngularFire 5. Я вижу упоминание в руководстве по миграции о необходимости «сопоставить» это, но, похоже, не работает правильный синтаксис, работающий над вышеуказанный код.

---

Обновление: следовал приведенным ниже советам, и, похоже, это сработало, но, похоже, между поведением старого и нового все еще есть некоторая разница.

<nav class="nav-standard">
    <app-logo></app-logo>
    <div class="nav-dropdown">
        <ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown">
            <li>
                <a mat-button class="mat-button" href="{{item.path}}" data-id="{{item.key}}" target="{{item.target}}" title="{{item.tooltip}}"  [attr.data-sort]="item.sortOrder" *ngIf="item.content; else elseBlock">{{item.menuText}}</a>
                <ng-template #elseBlock>
                    <a mat-button class="mat-button" data-id="{{item.key}}" target="{{item.target}}" title="{{item.tooltip}}">{{item.menuText}}</a>
                </ng-template>
                <ul class="nav-dropdown-content">
                    <li *ngFor="let childItem of items | async | filter : 'parent' : item.key" class="">
                        <a class="mat-button" href="{{childItem.path}}" data-id="{{childItem.key}}" target="{{childItem.target}}" title="{{childItem.tooltip}}" [attr.data-sort]="childItem.sortOrder">{{childItem.menuText}}</a>
                    </li>
                </ul>
            </li>
        </ul>   
    </div>
</nav>

Вложенное * ngFor, кажется, никогда не срабатывает, тогда как раньше оно срабатывало. Похоже, что элементов во вложенном * ngFor равен null ?? Я обнаружил, что если я создам еще один Observable в своем компоненте под названием childItems и назначу для него дублирующую логику, все будет хорошо, но мне кажется, что это грязно и неправильно. Как я могу получить данные в наблюдаемой, чтобы они сохранялись достаточно долго, чтобы использовать их во вложенной * ngFor?

Answer 1

информация ключа элемента больше не является «бесплатной» после новых изменений AngularFire API. Вместо того чтобы использовать .valueChanges (), чтобы превратить ссылку в Observable, вы можете использовать .snapshotChanges ():

    .snapshotChanges()
    .map(changes => {
      return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
    })

С этого момента вы можете ссылаться на ключ элемента, используя 'item.key' (обратите внимание, что вы не можете использовать '$ key').