Angular CRUD应用按ID获取的数据无法在HTML渲染如何解决？

核心问题：你调用的db.doc(id).snapshotChanges()返回的不是文档本身的字段数据，而是包含文档元信息、操作类型的包装对象，直接赋值给viewItems后，模板自然无法读取到item_name属性。

提供两种可选方案：

方案1：修改服务方法（推荐，改动最小） #

如果不需要获取文档ID、创建时间这类元数据，直接用valueChanges()替代snapshotChanges()，该方法会直接返回文档的字段内容：

// CrudServicesService 内修改 viewFunction 方法
viewFunction(id: string): Observable<any> {
    return this.db.collection('items').doc(id).valueChanges()
}

方案2：保留snapshotChanges，修改组件数据处理逻辑 #

如果需要用到文档元数据，就在订阅时提取实际的文档数据：

// ViewItemsComponent 内修改 onView 方法的订阅逻辑
onView() { 
    if (this.viewId !== null) {
        this.crudservice.viewFunction(this.viewId).subscribe(data => {
            // 提取实际文档字段
            this.viewItems = data.payload.doc.data()
            // 如果需要保留文档ID可补充：this.viewItems.id = data.payload.doc.id
        })
    }
}

修改完成后刷新页面即可看到数据正常渲染，你可以先打印处理后的viewItems确认包含item_name字段。

内容的提问来源于stack exchange，提问作者Manu Sunny