为什么在我的控制台中有这个：angular.js：13708 TypeError：无法设置未定义的属性“ projects”

Question

I am trying to fetch data returning from http promise received by three components to put it into a third one, here's my code (it will be easiest to understand).

I am trying to $onInit on the component to bind thoses datas in the view but I can't see anything in the html.

I really don't understand why my property 'project' is undefied because she's part of the Admin2 interface..?

Still I have got a way to go, I know I need to instanciate my admin2 object in my consctructor a little bit as follow:

 constructor(private baseURL: string, 
            private Shared: SharedService, 
            private Auth: AuthService, 
            private $state: IStateService
            ) { 
    'ngInject'; 
    this.Shared.title = 'ADMIN2'; 
    this.allowedRoles = ['admin']
    this.currentLocale = localStorage.getItem('locale');
    this.admin2 = {
        projects: {
            id: '',
            name: '',
            start_date: ''
        },
        consultants: {

                        },
        newsletters: {

                },
     };

here's the rest of the code:

 import * as angular from 'angular';
 import {IPromise} from "angular";
 import {IStateService} from 'angular-ui-router';
 import {IPaginationResponse} from "../../models/pagination/pagination-response";
import {Component} from '../../decorators/component';

import {AuthService} from "../../services/auth.service";
import {SharedService} from "../../services/shared.service";
import {ProjectService} from "../../services/project.service";
import {NewsletterService} from '../../services/newsletter.service';
import {ConsultantService} from "../../services/consultant.service";

import {IAdmin2} from "../../models/admin2";
import {IProject} from "../../models/project";
import {INewsletter} from "../../models/newsletter";
import {IConsultant} from "../../models/consultant";


@Component({
   templateUrl: '/app/src/components/admin2/admin2.component.html',
   bindings: {
    projectPagination: '<',
    consultantPagination: '<',
    newsletterPagination: '<',
    }
})
export class Admin2Component {
   public search: any = {searchInFile: 0}; 
   public promise: IPromise<void>; 
   public pagination: any = { 
    projectPagination: {
        order: 'start_date', 
        limit: 25, 
        page: 1 
    },
    consultantPagination: {
        order: 'trigram', 
        limit: 25, 
        page: 1 
    },
    newsletterPagination: {
        order: 'release_date', 
        limit: 25, 
        page: 1 
      }
   }; 

    // Bindings 
   public currentLocale: string; 
    public allowedRoles: string[]; 
   public admin2: IAdmin2; 

   public projectPagination: IPaginationResponse<IProject>; 
   public consultantPagination: IPaginationResponse<IConsultant>; 
    public newsletterPagination: IPaginationResponse<INewsletter>; 

    constructor(private baseURL: string, 
            private Shared: SharedService, 
            private Auth: AuthService, 
            private $state: IStateService) { 
    'ngInject'; 
       this.Shared.title = 'ADMIN2'; 
      this.allowedRoles = ['admin']
      this.currentLocale = localStorage.getItem('locale');
}

        private updateList(projectPagination: 
IPaginationResponse<IProject>, consultantPagination: 
IPaginationResponse<IConsultant>, newsletterPagination: 
IPaginationResponse<INewsletter>)   {


       this.admin2.projects = projectPagination.data;
       this.pagination.projectPagination = projectPagination.meta;
       this.pagination.total = projectPagination.meta.pagination.total;
       this.pagination.page = projectPagination.meta.pagination.current_page;

    this.pagination.consultantPagination = consultantPagination.meta;
    this.pagination.total = consultantPagination.meta.pagination.total;
    this.pagination.page = consultantPagination.meta.pagination.current_page;

    this.pagination.total = newsletterPagination.meta.pagination.total;
    this.pagination.page = 
  newsletterPagination.meta.pagination.current_page;    


   console.log(this.pagination.projectPagination);
   console.log(this.pagination.consultantPagination);


  $onInit() {



                this.updateList(this.projectPagination, 
 this.consultantPagination, this.newsletterPagination);



   }

}

Also here is my interface IAdmin2:

 import {IProject} from "./project";
 import {IConsultant} from "./consultant";
 import {INewsletter} from "./newsletter";

 export interface IAdmin2  {
    projects: IProject[];
    consultants: IConsultant[];
    newsletters: INewsletter[];
 }

For info (property) Admin2component.admin: IAdmin2 and IAdmin.projects: IProject[] (if it can help uno)

Here's my full error message:

 TypeError: Cannot set property 'projects' of undefined
   at Admin2Component.updateList (admin2.component.ts:77)
   at Admin2Component.$onInit (admin2.component.ts:130)
   at angular.js:9179
   at forEach (angular.js:329)
   at nodeLinkFn (angular.js:9168)
   at angular.js:9553
   at processQueue (angular.js:16170)
   at angular.js:16186
   at Scope.$eval (angular.js:17444)
   at Scope.$digest (angular.js:17257)
   at Scope.$apply (angular.js:17552)
   at done (angular.js:11697)
   at completeRequest (angular.js:11903)
   at XMLHttpRequest.requestLoaded (angular.js:11836)
   at XMLHttpRequest.wrapFn [as __zone_symbol___onload] (zone.js:1242)

Answer 1

You need to use Oninit Hook by invoking your services in using observables

https://angular.io/api/core/OnInit