Блог

Я следую учебнику, в котором по крайней мере 7 версий Angular. Я ожидал, что мне придется работать с устаревшим кодом, но я не могу найти недавний пример того, как сделать то же самое. Я просто хочу отобразить свойства объекта json, содержащиеся в наблюдаемом.

Вот код для app.component.ts:

 import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    author$;

    constructor(private db: AngularFireDatabase) {
        this.author$ = db.object('/authors/1').valueChanges();
        
    }

}
 

В разметке,

 <p>
    {{ (author$ | async).name }}
</p>
 

приведет к ошибке в названии. Если, однако, я вместо этого напишу:

 <p>
    {{ author$ | async | json }}
</p>
 

веб-страница полностью отобразит объект:

{ «Время»: верно, «имя»: «Имя», «студенты»: 100 }

Итак, как я могу использовать интерполяцию для визуализации определенного контента? Я, вероятно, должен также сказать, что в учебнике речь шла об использовании ключевого слова «as» для сокращения этого кода до чего-то подобного:

 <ul *ngIf="author$ | async as author">
    <li>{{ author.name }}</li>
    <li>{{ author.isPremium }}</li>
    <li>{{ author.students }}</li>
</ul>
 

Я смог заставить его работать, изменив способ объявления свойства author$. Раньше я объявлял его без типа. Теперь он работает правильно после того, как объявил это так:

 export class AppComponent {
    author$: Observable<any>;
...
 

с разметкой:

 <ul *ngIf="author$ | async as author">
    <li>{{ author.name }}</li>
    <li>{{ author.isPremium }}</li>
    <li>{{ author.students }}</li>
</ul>
 

Я также должен отметить, что синтаксис, предлагаемый @ck706, также работает, если свойство объявлено правильно

Почти уверен, что это должно работать с неизвестным типом. Я предполагаю, что Firebase возвращает анонимный объект. Если он возвращает строку JSON, возможно, потребуется включить в уравнение функцию JSON.parse ().

 <ul *ngIf="author$ | async as author">
    <li>{{ author['name']}}</li>
    <li>{{ author['isPremium'] }}</li>
    <li>{{ author['students'] }}</li>
</ul>