Ошибка типа: не удается прочитать свойство 'title' из undefined-Помогите мне :( - PullRequest
0 голосов
/ 17 января 2020

Я пишу проект Angular Связанный с проектом JAVA, который я сделал, мне пришлось импортировать купон в компонент из БД, чтобы просмотреть его для пользователя. Вот почему я создал функцию для этого:

import { Component, OnInit } from '@angular/core';
import { Coupon } from 'src/app/models/coupon';
import { ActivatedRoute } from '@angular/router';
import { CouponsService } from 'src/app/services/coupons.service';

@Component({
  selector: 'app-coupon-details',
  templateUrl: './coupon-details.component.html',
  styleUrls: ['./coupon-details.component.css']
})
export class CouponDetailsComponent implements OnInit {
  public coupon: Coupon;
  public constructor(private activeRoute: ActivatedRoute, private couponService : CouponsService) { }

  public ngOnInit() {
    const id = +this.activeRoute.snapshot.params.id;
    this.couponService.getCouponByIdRest(id).subscribe(c => {
    }, err=>{
      console.log("error:", err.message);
    });
  }
}

Как вы можете видеть, функция получит идентификатор по щелчку и передаст нам купон, который покажет нам детали купона, функцию запускает функцию JAVA на стороне сервера, которая возвращает купон в соответствии с идентификатором, и здесь я сталкиваюсь с ошибкой:

ОШИБКА TypeError: Невозможно прочитать свойство 'title' или не определено
в Object.eval [as updateRenderer] (CouponDetailsComponent. html: 4)

Это файл класса HTML:

image

Система, похоже, не распознает купон? Название? Я проверил, что все перечислено правильно, и не смог найти проблему. Как видите, я только начал писать в angular, если вам нужна дополнительная информация, чтобы помочь мне, я хотел бы отправить ее

Ответы [ 2 ]

1 голос
/ 17 января 2020

В вашем component вы никогда не даете свой api ответ на coupon переменную, подобную этой

 this.couponService.getCouponByIdRest(id).subscribe(c => { this.coupon = c}, err=>{
  console.log("error:", err.message);

});

И в вашем компоненте. html вы можете связать вот так

<h1>{{coupon?.title}}</h1>
0 голосов
/ 17 января 2020

Вы получили ответ от getCouponByIdRest API, но вы не присвоили его переменной coupon .

Так как html анализируется в в браузере, купон не имеет ничего, кроме NULL, и он не является неопознанным и одинаковым по своим свойствам.

Чтобы получить доступ к переменной, используйте this ключевое слово или еще он не будет идентифицировать переменную.

this.couponService.getCouponByIdRest(id).subscribe(c => { this.coupon = c}, err=>{
  console.log("error:", err.message);
});

Надеюсь, этот ответ поможет вам !!

...