Угловой 7: ОШИБКА TypeError: Невозможно прочитать свойство '0' из неопределенного (но результат работает)

Question

У меня проблема в том, что моя консоль показывает ошибку * "ОШИБКА TypeError: Невозможно прочитать свойство 'bg_img_preview' из неопределенного *. Но результат в порядке, я могу получить свои данные, чтобы показать. Я неконечно, почему он показывает событие ошибки, я могу получить свои данные. Я заметил, что console.log также не показывает результат. Я использую Angular 7 и создаю служебный HTTP-клиент для получения данных из файла JSON в моем локальном компьютере.

Это услуга

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';

   @Injectable({providedIn: 'root'})
   export class HttpGetJsonService {

   private _careerUrl = 'assets/json/careers-page.json';

   constructor(private _HttpClient: HttpClient) { }

    getCareerData() {
     return this._HttpClient.get(this._careerUrl);
     }

   }

Это career.ts

   import { Component, OnInit } from '@angular/core';
   import { HttpGetJsonService } from '../../../shared/http-service/http- 
            get-json.service';

   @Component({
   selector: 'app-career-pages',
   templateUrl: './career-pages.component.html',
   styleUrls: ['./career-pages.component.scss']
   })
   export class CareerPagesComponent implements OnInit {
    section: any = {};
    constructor(private _HttpGetJsonService: HttpGetJsonService) { }

   ngOnInit() {

    this._HttpGetJsonService.getCareerData().subscribe(data => {
    this.section = data['data'][0].all_sections;
    console.log(this.section);
    })
   }
   }

Это career.html

    <div class="col-md-4">
            <img [src]="section[2].bg_img_preview" alt="" width="50%">
     </div>

Это файл JSON

    ...........
    ...........
    {
      "id": "sec61539669775971",
      "name": "career-asset",
      "type": null,
      "bg_img": "/assets/img/faq-bg/faq-bg-01.jpg",
      "bg_color": null,
      "created_date": null,
      "updated_date": null,
      "bg_video": null,
      "created_by_id": "usr01539232275296",
      "updated_by_id": "usr01539232275296",
      "is_backup": 0,
      "parent_id": null,
      "ordering": 1,
      "edit_bg_image": 1,
      "site_pages_id": "sitePagesec315395",
      "record_type": "asset",
      "bg_img_preview": "/assets/img/faq-bg/faq-bg-01.jpg",
      "langs": [],
      "sub_sections": [],
      ............
      ............

Результат в порядке. Я могу получить свою фотографию, но мне интересно, почему я получаю эту ошибку? Даже console.log также не показывает значение изображения. Я очень новичок в этом.

Answer 1

Вы можете попробовать:

[src]="section[2]?.bg_img_preview"

Ваш объект section[2] не будет иметь значения до получения ответа API. Поэтому используйте ?, чтобы применить нулевую проверку до получения ответа.