Question

**尝试导航到图形/：id时出现错误。错误状态为“无法读取未定义的属性”。当我单击图形时，我试图在图形上显示详细信息，并且应该从json文件中获取一个ID才能路由到页面。

似乎错误发生在getDrawing（id：number）函数中或我的drawingService服务中。有人可以看到我可能会想念的东西吗？

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DrawingListComponent } from './drawings/drawing-list.component';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './footer/footer.component';
import { FavoriteDrawingsComponent } from './favorite-drawings/favorite-drawings.component';
import { ContactsComponent } from './contacts/contacts.component';
import { LoginComponent } from './user/login.component';
import { DrawingDetailsComponent } from './drawings/drawing-details/drawing-details.component'

@NgModule({
  declarations: [
    AppComponent,
    DrawingListComponent,
    HomeComponent,
    FooterComponent,
    FavoriteDrawingsComponent,
    ContactsComponent,
    LoginComponent,
    DrawingDetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    CommonModule,
    RouterModule.forRoot([{path: 'home', component: HomeComponent},
      {path: 'drawings', component: DrawingListComponent}, 
      {path: 'drawings/:id', component: DrawingDetailsComponent},      
      {path: 'login', component: LoginComponent},      
      {path: '*', component: HomeComponent, pathMatch: 'full'},
      {path: '', component: HomeComponent, pathMatch: 'full'}])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core'
import { DrawingService } from '../drawing.service'
import { IDrawing } from '../drawing';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { Route } from '@angular/compiler/src/core';

@Component({
    templateUrl: './drawing-details.component.html'
})
export class DrawingDetailsComponent implements OnInit {
    drawing: IDrawing | undefined;   
    errorMessage: string = '';

    constructor(private route: ActivatedRoute,
                private drawingService: DrawingService,
                private router: Router){ }
                
    ngOnInit() {
        let id = +this.route.snapshot.paramMap.get('id');
        //this.drawingId = id;
        this.getDrawing(id);
       
    }
    getDrawing(id: number) {
        this.drawingService.getDrawing(id).subscribe(drawing => this.drawing = drawing,
            error => this.errorMessage = <any>error);
    }
    
}

<div>
    <img *ngIf = "drawing" [src] = "drawing.imageUrl">
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            {{ drawing.name }}            
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            {{ drawing.description }}
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            {{ drawing.imageUrl }}
        </div>
    </div>
</div>

<div style="width:100%; height:500px">
<div class='container col-10'>
  
  <header class="">
    
  </header>
  
  <div class="container">
      <table class='table'>{{ favList }}
        </table>
  <div class="table-responsive">
  <table class='table'>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Description</th>
      <th>Image</th>
    </tr>
    <tr *ngFor = "let drawing of drawings">
      <td>{{ drawing.id }}</td>
      <td>{{ drawing.name }}</td>
      <td>{{ drawing.description }}</td>
      <td><a [routerLink] = "['/drawings', drawing.id]">
        <img class="img-fluid img-thumbnail float-right pic" [src] = "drawing.imageUrl" >
      </a></td>
      <td><button (click) = "onClick()" class="btn btn-primary">Add Favorite</button></td>
      <router-outlet></router-outlet>
      <app-favorite-drawings *ngIf="isFav" #favDrawings (addFavorite) = "favAdded($event)" [myFav] = "drawing.name" [favId] = "drawing.id" ></app-favorite-drawings>
     </tr>
  </table>
  
  </div>
  
  </div>
</div>

**

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IDrawing } from './drawing';
import { Injectable } from '@angular/core';
import { tap, map, filter } from 'rxjs/operators';

@Injectable ({
    providedIn: 'root'
})
export class DrawingService {
    private productAPI = 'assets/drawings.json';

    constructor (private http: HttpClient) {
    }
    
    getDrawings(): Observable<IDrawing[]> {
        return this.http.get<IDrawing[]>(this.productAPI);       
    }
   getDrawing(id: number): Observable<IDrawing | undefined> {
        return this.getDrawings().pipe(
            map((drawings: IDrawing[]) => drawings.find(d => d.id === id)));
    }
    
}

Answer 1

哦，我知道了这个问题，那是一个新手的错误。所以代码很好。问题是JSON文件。在示例JSON文件中，我从中获取数据：

{“ id”：“ 1”， “名称”：“儿童化学”， “ description”：“和爸爸做化学的女孩。”， “ imageUrl”：“两本书/GirlChemistry.jpg的http://www.drawnworks.com/images/Tale }

但是我的方法正在寻找id作为数字，因此我只需要简单地删除JSON文件中每个图形对象上id属性的引号即可

{“ id”：1， “名称”：“儿童化学”， “ description”：“和爸爸做化学的女孩。”， “ imageUrl”：“两本书/GirlChemistry.jpg的http://www.drawnworks.com/images/Tale }

由于这些方法正在接收数字类型参数，因此页面现在可以正常加载。感谢Igor和DEVCNN在今天早上对本文发表的如此迅速的回复。对这个帖子中的任何问题以及我在这个匆忙的帖子中缺少的任何细节感到抱歉。我打算将JSON文件添加到帖子中，这就是我注意到问题的时候了。谢谢大家！

在Angular网站上出现错误“无法读取未定义的属性”

1 个答案: