错误TypeError：无法读取未定义的REST服务的属性“名称”

时间：2019-06-21 08:13:11

标签： json angular rest api

当我致电休息服务来获取数据时，它们没有到达。 其余服务的输出如下所示

[
    {
        "idpizza": 1,
        "name": "jdjd",
        "price": 3
    },
    {
        "idpizza": 2,
        "name": "sdfv",
        "price": 2
    }
]

我已经尝试过用我编写的一份比萨饼进行相同的程序，并且可以使用，所以我认为使用该服务是错误的。

服务 

    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { HttpClient, HttpHeaders } from '@angular/common/http';

    import { Pizza } from '../model/Pizza';

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    }

    @Injectable({
      providedIn: 'root'
    })
    export class PizzaService {
      pizzasUrl:string = 'http://localhost:8080/PizzeriaServer/webapi/myresource';
      pizzasLimit = '?_limit=5';

      constructor(private http:HttpClient) { }

      // Get Pizzas
      getPizzas():Observable<Pizza[]> {
        return this.http.get<Pizza[]>(`${this.pizzasUrl}${this.pizzasLimit}`);
      }
    }

app.component.html 

<strike>
<div>
  <app-header></app-header>
  <app-pizza-item></app-pizza-item>
 </strike>

PizzaItem.component 

    import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
    import { PizzaService } from '../../services/pizza.service';
    import { Pizza } from 'src/app/model/Pizza';
    @Component({
      selector: 'app-pizza-item',
      templateUrl: './pizza-item.component.html',
      styleUrls: ['./pizza-item.component.css']
    })
    export class PizzaItemComponent implements OnInit {
      @Input() pizza: Pizza;

      constructor(private pizzaService:PizzaService) { }

      ngOnInit() {
      }

      // Set Dynamic Classes
      setClasses() {

      }
    }
<strike>

pizza-item.component.html 

<div [ngClass]="setClasses()">
  <p>
    <label>
      {{ pizza.name }}
    </label>
    <button class="del">X</button>
  </p>
</div>
</strike>

PizzasComponent 

    import { Component, OnInit } from '@angular/core';
    import { PizzaService } from '../../services/pizza.service';

    import { Pizza } from '../../model/Pizza';

    @Component({
      selector: 'app-pizzas',
      templateUrl: './pizzas.component.html',
      styleUrls: ['./pizzas.component.css']
    }) 
    export class PizzasComponent implements OnInit {
      pizzas:Pizza[];

      constructor(private pizzaService:PizzaService) {
       }

      ngOnInit() {
        this.pizzaService.getPizzas().subscribe(pizzas => {
          this.pizzas = pizzas;
        });

      }
    } 

<strike>

pizzas.component.html 

<app-pizza-item 
  *ngFor="let pizza of pizzas" 
  [pizza]="pizza"
>
{{console.log(pizzas)}}
</app-pizza-item>

</strike>
    // model

    export class Pizza {
        idpizza:number;
        name:string;
        price:number;
      }

错误：

    ERROR TypeError: Cannot read property 'name' of undefined
        at Object.eval [as updateRenderer] (PizzaItemComponent.html:3)
        at Object.debugUpdateRenderer [as updateRenderer] (core.js:36090)
        at checkAndUpdateView (core.js:35073)
        at callViewAction (core.js:35433)
        at execComponentViewsAction (core.js:35361)
        at checkAndUpdateView (core.js:35074)
        at callViewAction (core.js:35433)
        at execComponentViewsAction (core.js:35361)
        at checkAndUpdateView (core.js:35074)
        at callWithDebugContext (core.js:36407)
    View_PizzaItemComponent_0 @ PizzaItemComponent.html:3
    proxyClass @ compiler.js:19257
    logError @ core.js:36342
    handleError @ core.js:7239
    (anonymous) @ core.js:32092
    invoke @ zone-evergreen.js:359
    run @ zone-evergreen.js:124
    runOutsideAngular @ core.js:30830
    tick @ core.js:32089
    _loadComponent @ core.js:32130
    bootstrap @ core.js:32053
    (anonymous) @ core.js:31675
    _moduleDoBootstrap @ core.js:31671
    (anonymous) @ core.js:31626
    invoke @ zone-evergreen.js:359
    onInvoke @ core.js:30904
    invoke @ zone-evergreen.js:358
    run @ zone-evergreen.js:124
    (anonymous) @ zone-evergreen.js:855
    invokeTask @ zone-evergreen.js:391
    onInvokeTask @ core.js:30885
    invokeTask @ zone-evergreen.js:390
    runTask @ zone-evergreen.js:168
    drainMicroTaskQueue @ zone-evergreen.js:559
    Promise.then (async)
    scheduleMicroTask @ zone-evergreen.js:542
    scheduleTask @ zone-evergreen.js:381
    scheduleTask @ zone-evergreen.js:211
    scheduleMicroTask @ zone-evergreen.js:231
    scheduleResolveOrReject @ zone-evergreen.js:845
    then @ zone-evergreen.js:955
    bootstrapModule @ core.js:31656
    ./src/main.ts @ main.ts:11
    __webpack_require__ @ bootstrap:78
    0 @ main.ts:12
    __webpack_require__ @ bootstrap:78
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1
    PizzaItemComponent.html:3 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 5, nodeDef: {…}, elDef: {…}, elView: {…}}elDef: {nodeIndex: 4, parent: {…}, renderParent: {…}, bindingIndex: 1, outputIndex: 0, …}elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: PizzaItemComponent, …}nodeDef: {nodeIndex: 5, parent: {…}, renderParent: {…}, bindingIndex: 1, outputIndex: 0, …}nodeIndex: 5view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: PizzaItemComponent, …}component: (...)componentRenderElement: (...)context: (...)elOrCompView: (...)injector: (...)providerTokens: (...)references: (...)renderNode: (...)__proto__: Object
    View_PizzaItemComponent_0 @ PizzaItemComponent.html:3
    proxyClass @ compiler.js:19257
    logError @ core.js:36342
    handleError @ core.js:7244
    (anonymous) @ core.js:32092
    invoke @ zone-evergreen.js:359
    run @ zone-evergreen.js:124
    runOutsideAngular @ core.js:30830
    tick @ core.js:32089
    _loadComponent @ core.js:32130
    bootstrap @ core.js:32053
    (anonymous) @ core.js:31675
    _moduleDoBootstrap @ core.js:31671
    (anonymous) @ core.js:31626
    invoke @ zone-evergreen.js:359
    onInvoke @ core.js:30904
    invoke @ zone-evergreen.js:358
    run @ zone-evergreen.js:124
    (anonymous) @ zone-evergreen.js:855
    invokeTask @ zone-evergreen.js:391
    onInvokeTask @ core.js:30885
    invokeTask @ zone-evergreen.js:390
    runTask @ zone-evergreen.js:168
    drainMicroTaskQueue @ zone-evergreen.js:559
    Promise.then (async)
    scheduleMicroTask @ zone-evergreen.js:542
    scheduleTask @ zone-evergreen.js:381
    scheduleTask @ zone-evergreen.js:211
    scheduleMicroTask @ zone-evergreen.js:231
    scheduleResolveOrReject @ zone-evergreen.js:845
    then @ zone-evergreen.js:955
    bootstrapModule @ core.js:31656
    ./src/main.ts @ main.ts:11
    __webpack_require__ @ bootstrap:78
    0 @ main.ts:12
    __webpack_require__ @ bootstrap:78
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1
    core.js:30242 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
    PizzaItemComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
        at Object.eval [as updateRenderer] (PizzaItemComponent.html:3)
        at Object.debugUpdateRenderer [as updateRenderer] (core.js:36090)
        at checkAndUpdateView (core.js:35073)
        at callViewAction (core.js:35433)
        at execComponentViewsAction (core.js:35361)
        at checkAndUpdateView (core.js:35074)
        at callViewAction (core.js:35433)
        at execComponentViewsAction (core.js:35361)
        at checkAndUpdateView (core.js:35074)
        at callWithDebugContext (core.js:36407)
    View_PizzaItemComponent_0 @ PizzaItemComponent.html:3
    proxyClass @ compiler.js:19257
    logError @ core.js:36342
    handleError @ core.js:7239
    (anonymous) @ core.js:32092
    invoke @ zone-evergreen.js:359
    run @ zone-evergreen.js:124
    runOutsideAngular @ core.js:30830
    tick @ core.js:32089
    (anonymous) @ core.js:31927
    invoke @ zone-evergreen.js:359
    onInvoke @ core.js:30904
    invoke @ zone-evergreen.js:358
    run @ zone-evergreen.js:124
    run @ core.js:30769
    next @ core.js:31924
    schedulerFn @ core.js:27846
    __tryOrUnsub @ Subscriber.js:185
    next @ Subscriber.js:124
    _next @ Subscriber.js:72
    next @ Subscriber.js:49
    next @ Subject.js:39
    emit @ core.js:27808
    checkStable @ core.js:30847
    onHasTask @ core.js:30924
    hasTask @ zone-evergreen.js:411
    _updateTaskCount @ zone-evergreen.js:431
    _updateTaskCount @ zone-evergreen.js:264
    runTask @ zone-evergreen.js:185
    drainMicroTaskQueue @ zone-evergreen.js:559
    Promise.then (async)
    scheduleMicroTask @ zone-evergreen.js:542
    scheduleTask @ zone-evergreen.js:381
    scheduleTask @ zone-evergreen.js:211
    scheduleMicroTask @ zone-evergreen.js:231
    scheduleResolveOrReject @ zone-evergreen.js:845
    then @ zone-evergreen.js:955
    bootstrapModule @ core.js:31656
    ./src/main.ts @ main.ts:11
    __webpack_require__ @ bootstrap:78
    0 @ main.ts:12
    __webpack_require__ @ bootstrap:78
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1
    PizzaItemComponent.html:3 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 5, nodeDef: {…}, elDef: {…}, elView: {…}}elDef: {nodeIndex: 4, parent: {…}, renderParent: {…}, bindingIndex: 1, outputIndex: 0, …}elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: PizzaItemComponent, …}nodeDef: {nodeIndex: 5, parent: {…}, renderParent: {…}, bindingIndex: 1, outputIndex: 0, …}nodeIndex: 5view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: PizzaItemComponent, …}component: (...)componentRenderElement: (...)context: (...)elOrCompView: (...)injector: (...)providerTokens: (...)references: (...)renderNode: (...)__proto__: Object
    View_PizzaItemComponent_0 @ PizzaItemComponent.html:3
    proxyClass @ compiler.js:19257
    logError @ core.js:36342
    handleError @ core.js:7244
    (anonymous) @ core.js:32092
    invoke @ zone-evergreen.js:359
    run @ zone-evergreen.js:124
    runOutsideAngular @ core.js:30830
    tick @ core.js:32089
    (anonymous) @ core.js:31927
    invoke @ zone-evergreen.js:359
    onInvoke @ core.js:30904
    invoke @ zone-evergreen.js:358
    run @ zone-evergreen.js:124
    run @ core.js:30769
    next @ core.js:31924
    schedulerFn @ core.js:27846
    __tryOrUnsub @ Subscriber.js:185
    next @ Subscriber.js:124
    _next @ Subscriber.js:72
    next @ Subscriber.js:49
    next @ Subject.js:39
    emit @ core.js:27808
    checkStable @ core.js:30847
    onHasTask @ core.js:30924
    hasTask @ zone-evergreen.js:411
    _updateTaskCount @ zone-evergreen.js:431
    _updateTaskCount @ zone-evergreen.js:264
    runTask @ zone-evergreen.js:185
    drainMicroTaskQueue @ zone-evergreen.js:559
    Promise.then (async)
    scheduleMicroTask @ zone-evergreen.js:542
    scheduleTask @ zone-evergreen.js:381
    scheduleTask @ zone-evergreen.js:211
    scheduleMicroTask @ zone-evergreen.js:231
    scheduleResolveOrReject @ zone-evergreen.js:845
    then @ zone-evergreen.js:955
    bootstrapModule @ core.js:31656
    ./src/main.ts @ main.ts:11
    __webpack_require__ @ bootstrap:78
    0 @ main.ts:12
    __webpack_require__ @ bootstrap:78
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1

1 个答案:

答案 0 :(得分：1)

使用模板表达式运算符?.（the-safe-navigation-operator----and-null-property-paths）进行动态属性绑定，如

<label>
   {{ pizza?.name }}
</label>
相关问题
最新问题