无法呈现来自 FirebaseObjectObservables Angular2 的值答案

【问题标题】：Cannot render the values from FirebaseObjectObservables Angular2无法呈现来自 FirebaseObjectObservables Angular2 的值
【发布时间】：2017-04-18 00:49:45
【问题描述】：

在我的服务文件中：

postDetail: FirebaseObjectObservable<any>;
constructor( private af: AngularFire ) { }
public getBanquetDetail(id){
    this.postDetail = this.af.database.object('/Posts/'+id) as FirebaseObjectObservable<Post>;    
    return this.postDetail;
  }

在我的 component.ts 文件中

    export class PostDetailComponent implements OnInit {
        id: any;
        test: any;
        constructor(private banquetService: PostService, private router: Router, private route: ActivatedRoute) { }

        ngOnInit() {
            // Get the id
            this.id = this.route.snapshot.params['id'];
            this.banquetService.getBanquetDetail(this.id).subscribe(response => {
console.log(response)                
this.test = response
            })
        }      

    }

我在控制台中获取了一个对象，但无法将值呈现为

<h2>{{test.title}}</h2>

我收到错误：

TypeError: 无法读取未定义的属性“标题”

有人请帮帮我吗？我在哪里穿？

【问题讨论】：

标签： angular firebase firebase-realtime-database angularfire2

【解决方案1】：

test 的值是在订阅后分配的，因此 title 在加载时不可用。

您可以像下面这样添加safe navigation operator (?)，仅在它没有空值后进行评估。

 <h2>{{test?.title}}</h2>

你可以阅读safe navigation operator here.

希望这会有所帮助！

【讨论】：

【解决方案2】：

当您不确定路径中的每个对象是否都存在时，请使用 elvis 运算符 (?)：

<h2>{{test?.title}}</h2>

在 Angular 2 中，“Elvis 运算符”（实际上是安全导航运算符）允许在您不完全确定路径中的每个对象是否都存在的情况下安全地导航对象路径。如果有效则返回路径的结果，从而防止空引用异常；或，否则为空。 - Ben Nadel: Providing Default Values For The Safe Navigation Operator In Angular 2 Beta 8

【讨论】：