為什么在我的控制台中有這個：angular.js：13708 TypeError：無法設置未定義的屬性“ projects”

Question

我試圖獲取從三個組件收到的http承諾返回的數據，然后將其放入第三個組件，這是我的代碼（最容易理解）。

我正在嘗試在組件上綁定$ onInit以在視圖中綁定這些數據，但在html中看不到任何內容。

我真的不明白為什么我的屬性“項目”沒有定義，因為她是Admin2界面的一部分。

我還有路要走，我知道我需要在構造器中實例化我的admin2對象，如下所示：

 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: {

                },
     };

這是其余的代碼：

 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);



   }

}

這也是我的界面IAdmin2：

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

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

有關信息（屬性）Admin2component.admin：IAdmin2和IAdmin.projects：IProject []（如果可以幫助您）

這是我的完整錯誤消息：

 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

您需要通過使用可觀察對象調用服務來使用Oninit Hook

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