时间戳

首页 > 解决方案 > 是否有可能从特定 ID 获取数据，数据未显示

angular - 是否有可能从特定 ID 获取数据，数据未显示

问题描述

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 文件或服务文件中。

标签： angularviewcrudrouter

解决方案

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

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

推荐阅读