是否有可能从特定 id 获取数据，数据未显示答案

【问题标题】：is there is any possibility for getting data from particular id, data not showing是否有可能从特定 id 获取数据，数据未显示
【发布时间】：2021-08-23 05:48:18
【问题描述】：

id也得到了，但是在html文件中无法打印来自特定id的数据，实际上是使用crud application.add，list，delete，已经完成，但是在view的情况下onView函数有问题，你能帮帮我吗

查看-ts-文件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CrudServicesService } from '../services/crud-services.service';
    
@Component({
   selector: 'app-view-items',
   templateUrl: './view-items.component.html',
   styleUrls: ['./view-items.component.css']
})

export class ViewItemsComponent implements OnInit {

   viewId: string | null
   viewItems: any
    
   constructor(private crudservice: CrudServicesService,
        private activatedroute: ActivatedRoute) {
    
   this.viewId = this.activatedroute.snapshot.paramMap.get('id')
        console.log(this.viewId)
   }
    
   ngOnInit(): void {
        this.onView()
   }
    
   onView() { 
       if (this.viewId !== null) {
          this.crudservice.viewFunction(this.viewId).subscribe(data => {
            console.log(data)
            this.viewItems = data
          })
       }
   }
}

html 文件

<ul *ngIf="viewItems">
     <li>{{viewItems?.item_name}}</li>
</ul>

服务文件

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
    
@Injectable({
    providedIn: 'root'
})

export class CrudServicesService {
    
    constructor(private db: AngularFirestore) { }
    
    viewFunction(id: string): Observable<any> {
        return this.db.collection('items').doc(id).snapshotChanges()
    }
    
}

路由文件

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddItemsComponent } from './add-items/add-items.component';
import { ListItemsComponent } from './list-items/list-items.component';
import { ViewItemsComponent } from './view-items/view-items.component';

const routes: Routes = [
  { path: 'view/:id', component: ViewItemsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

这是路由文件，这些都可以，问题出在ts文件，或者service文件也有。

【问题讨论】：

console.log(this.viewId) 是否显示视图 ID？
是 ID 也显示，但数据未获取

标签： angular view crud router

【解决方案1】：

所以我假设onView() 中的console.log(data) 没有显示任何内容？如果是这种情况，它甚至可能无法访问服务调用本身，因为 if (this.viewId !== null)、ngOnInit() 步骤在组件生命周期中只发生一次。

我没有使用 AngularFirestore，但您需要执行一些额外的步骤才能从 snapshotChanges() https://stackoverflow.com/a/55304884/15440211 中获取数据

【讨论】：