Как исправить «Cannot read свойство '...' of undefined» при вызове углового метода обслуживания внутри шаблона - PullRequest
Новая
       20

Как исправить «Cannot read свойство '...' of undefined» при вызове углового метода обслуживания внутри шаблона

0 голосов
/ 18 июня 2019

Я создал новый сервис в своем проекте и добавил некоторые функции к нему. Когда я попытался вызвать сервисную функцию из моего шаблона компонента, я получил эту ошибку «Невозможно прочитать свойство isCompanyElptable из undefined»

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

Это мой сервис: 

import { FinancialHealth } from 'src/app/shared/models/financial-health';
import { LocalStoreService } from 'src/app/shared/services/local-store.service';
import {Application} from './../models/application';
import {Injectable} from '@angular/core';
import { NgbDateParserFormatterService} from './ngb-date-parser-formatter.service ';

@Injectable({
  providedIn: 'root'
})

export class EligibilityService {
  application: Application;
  activityAreas = [];
  areasEligibility = [];
  legalForms = [];
  jobPositions = [];
  constructor(
    private ls: LocalStoreService,
    private dateService: NgbDateParserFormatterService

  ) {
    this.application = this.ls.getItem('application');
    const {
      activity_areas,
      legal_forms,
      job_positions,
      areas_eligiblity
    } =
    this.ls.getItem('shared_data').data;
    this.activityAreas = activity_areas;
    this.legalForms = legal_forms;
    this.jobPositions = job_positions.filter(job => job.is_management_position ==
      1);
    this.areasEligibility = areas_eligiblity;
  }

  public isCompanyEligible(application ? ) {
    if (application) {
      this.application = application;
    }
    if (!this.application || (!this.application.company)) {
      return null;
    }
    const company = this.application.company;
    let age;
    if (typeof this.application.company.established_at == 'object') {
      const date =
        this.dateService.format(this.application.company.established_at);
      age = this.getAge(date);
    } else {
      age = this.getAge(company.established_at)
    }
    return this.legalForms.includes(company.legal_form) && (age >= 2 && age <=
      5);
  }

  growthRate(firstYear, secondYear) {
    if (!firstYear || !secondYear) {
      return 0;
    }
    return Math.round(((secondYear - firstYear) / firstYear) * 100);
  }
}

Это мой component.ts: 

import { Component, OnInit } from '@angular/core';
import { CustomValidators } from 'ng2-validation';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { DataLayerService } from 'src/app/shared/services/data-layer.service';
import { BreadcrumbService } from '../../../shared/services/breadcrumb.service';
import { EligibilityService } from 'src/app/shared/services/eligibility.service';

@Component({
  selector: 'app-form-sommaire',
  templateUrl: './sommaire.component.html',
  styleUrls: ['./sommaire.component.scss']
})
export class SommaireFormComponent implements OnInit {
  formBasic: FormGroup;
  loading: boolean;
  radioGroup: FormGroup;
  sharedData: any;
  isValid: Boolean = false;
  application: any;
  breadcrumb: { label: string; route: string; }[];
  title: String = 'Sommaire';
  constructor(
    private fb: FormBuilder,
    private toastr: ToastrService,
    private ls: LocalStoreService,
    private appService: ApplicationService,
    private data: BreadcrumbService,
    public eligibility: EligibilityService
  ) { }

}

Это мой HTML-шаблон: 

<div class="col-lg-2">
  <i *ngIf="eligibility.isCompanyEligible()" class="icon ion-ios-checkmark-circle large-success"></i>
  <i *ngIf="eligibility.isCompanyEligible() === false" class="icon ion-ios-close-circle large-danger"></i>
  <i *ngIf="eligibility.isCompanyEligible() == null" class="icon ion-md-alert large-warning"></i>
</div>

1 Ответ

0 голосов
/ 18 июня 2019

Все, что помечено как private, также не доступно для шаблона компонента.(Доступ к закрытым членам возможен при использовании JIT, например, во время разработки, но не при использовании AOT, например, для производства.)

На самом деле, рекомендуется обернуть любые свойства / методы службы в свойство компонента./ method и шаблон связывается с / вызывает свойство или метод компонента для доступа к данным сервиса.

Примерно так: 

   get isCompanyEligible(): boolean {
      return this.eligibility.isCompanyEligible();
   }

и используйте его в своем шаблоне: - <i *ngIf="isCompanyEligible()"

ИЛИ

Сделайте общедоступной инъекцию EligibilityService в constructor компонента, чтобы получить доступ к шаблону: 

constructor(
    private fb: FormBuilder,
    private toastr: ToastrService,
    private ls: LocalStoreService,
    private appService: ApplicationService,
    private data: BreadcrumbService,
    public eligibility: EligibilityService
  ) { }
...