Javascript 角度初始化变量（数组、对象）在ngOnInit未定义| |接收到Json对象，没有可访问的对象属性_Javascript_Angular_Typescript

Javascript 角度初始化变量（数组、对象）在ngOnInit未定义| |接收到Json对象，没有可访问的对象属性

javascript angular typescript

Javascript 角度初始化变量（数组、对象）在ngOnInit未定义| |接收到Json对象，没有可访问的对象属性,javascript,angular,typescript,Javascript,Angular,Typescript,在执行我的组件pdfMaker时，Angular 9遇到了一个问题，标题解释了我的问题，另外，当我实例化变量（矫揉造作之前的数组和对象）时，以及在HTML和console.log中的nginitthoes为空（未定义）之后。当我使用rxjs观察变量中的JSON结果时，问题是相同的，事实上变量受到影响，但属性没有定义这是我的组件PDFMaker（HTML，TS）和我的service.TS： pdfmaker.html <body class="body"> <div id="c

在执行我的组件pdfMaker时，Angular 9遇到了一个问题，标题解释了我的问题，另外，当我实例化变量（矫揉造作之前的数组和对象）时，以及在HTML和console.log中的nginitthoes为空（未定义）之后。当我使用rxjs观察变量中的JSON结果时，问题是相同的，事实上变量受到影响，但属性没有定义

这是我的组件PDFMaker（HTML，TS）和我的service.TS：

pdfmaker.html

<body class="body">
<div id="content" #content>
  <p>{{helpdesk}}</p>
  <table class="table-striped BORDERED">
   <thead>
   <tr>
     <td>Article</td>
     <td>Quantité</td>
     <td>Prix Unitaire HT</td>
     <td>Prix Unitaire ttc</td>
     <td>Article Originel</td>
   </tr>
   </thead>
   <tbody>

   <tr>
     <td><p><input type="text"  name="designation" placeholder="Designation"  [(ngModel)]="model_article_devis[0].AD_designation" #model_article="ngModel"></p></td>
     <td><p><input type="number" name="quantity"                              [(ngModel)]="model_article_devis[0].AD_quantity"></p></td>
     <td><p><input type="text"   name="prix_ht"     placeholder="prix ht"     [(ngModel)]="model_article_devis[0].AD_prix_ht"></p></td>
     <td><p><input type="text"   name="prix_ttc"    placeholder="prix_ttc"    [(ngModel)]="model_article_devis[0].AD_prix_ttc"></p></td>
     <td>
       <select name="article_original"
               id="article_original1"
               class="form-control"
       >
         <option  [value]="0" style="color:white;background-color:red;">
           Ne pas affecter pour le moment
         </option>
         <option *ngFor="let AO of AL_article_original" [value]="AO?.AO_id">
           {{AO?.AO_designation}}
         </option>
       </select>
     </td>
   </tr>
   <tr *ngFor="let mf of model_for">
      <span class="ligne{{mf}}" style="display:none;">
        <td><p><input type="text"  name="designation"  placeholder="Designation" [(ngModel)]="model_article_devis[mf].AD_designation"></p></td>
        <td><p><input type="number"  name="quantity"  [(ngModel)]="model_article_devis[mf].AD_quantity"></p></td>
        <td><p><input type="text" name="prix_ht"  placeholder="prix ht" [(ngModel)]="model_article_devis[mf].AD_prix_ht"></p></td>
        <td><p><input type="text" name="prix_ttc" placeholder="prix_ttc"  [(ngModel)]="model_article_devis[mf].AD_prix_ttc"></p></td>
        <td>
        <select name="article_original"
                id="article_original"
                class="form-control inputfield"
                >
                                  <option  [value]="0" style="color:white;background-color:red;">
                                    Ne pas affecter pour le moment
                                  </option>
                                  <option  *ngFor="let AO of AL_article_original" [value]="AO.AO_id">
                                    {{AO.AO_designation}}
                                  </option>
                                </select>
        </td>
      </span>
   </tr>
   </tbody>
 </table>
</div>
<button (click)="Add_ligne()">Ajouter une ligne</button>
<button (click)="Del_ligne()">Supprimer une ligne</button>
<button (click)="GenererPDF()">Fk</button>
</body>


{{helpdesk}}
文章
定量
优泰大奖赛
集训大奖赛ttc
文章原文




这是一个令人难忘的时刻
{{AO？.AO_名称}




这是一个令人难忘的时刻
{{AO.AO_名称}
外部对齐
供应商未对齐
Fk

pdfmaker.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import * as jsPDF from 'jspdf';
import {Devis} from '../models/devis';
import {Article_devis} from '../models/article_devis';
import * as $ from 'Jquery';
import {Article_origine} from '../models/article_origine';
import {ArticleOrigineService} from '../shares/services/devis/article-origine.service';

@Component({
  selector: 'app-pdfmake',
  templateUrl: './pdfmake.component.html',
  styleUrls: ['./pdfmake.component.scss']
})
export class PdfmakeComponent implements OnInit {
  @ViewChild('content') content: ElementRef;
   helpdesk  = "helpdesk";
   model_devis : Devis = { DEV_id: null, DEV_total_TTC: null, DEV_total_HT: null, DEV_ref: null, DEV_note: null, DEV_id_part: null, DEV_id_article_devis: null, DEV_etat: null, DEV_date: null };
   model_article_devis : Article_devis[] =  [null];
   model_for : number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
   count_ligne = 1;
   AL_article_original : Article_origine[] = [null];
  constructor(private ArticleOrigineService: ArticleOrigineService) {

  }

  ngOnInit(): void {
    for(let i = 0; i < this.model_for.length-1; i++){
    //  this.model_article_devis[i] =  { AD_remise: null, AD_prix_ttc: null, AD_id_AO: null, AD_id: null, AD_quantity: null, AD_prix_ht: null, AD_id_Devis: null, AD_designation: null};
      this.AL_article_original[i] = { AO_designation: "ok", AO_id: 1, AO_stock: null, AO_remise: null, AO_prix_ttc: null, AO_prix_ht: null};
    }
    this.getAllArticle_Origine();
  }

  getAllArticle_Origine(){
    this.ArticleOrigineService.GET_ALL_ARTICLE_ORIGINE().subscribe(
      success => {
        this.AL_article_original = success;
        for(let i=0; i < this.AL_article_original.length; i++){
            console.log(this.AL_article_original[i]?.AO_designation);
        }
      },
      error => {
        console.log("Error while getting the Originals Articles");
        console.log(error);
      }
    )
  }
  Add_ligne(){
    if(this.count_ligne === 1 ){
      let x = $(".ligne1");
      x.show();
      this.count_ligne = 2;
    }else if(this.count_ligne === 2 ){
      let x = $(".ligne2");
      x.show();
      this.count_ligne = 3;
    }
    else if(this.count_ligne === 3 ){
      let x = $(".ligne3");
      x.show();
      this.count_ligne = 4;
    }
    else if(this.count_ligne === 4 ){
      let x = $(".ligne4");
      x.show();
      this.count_ligne = 5;
    }
    else if(this.count_ligne === 5 ){
      let x = $(".ligne5");
      x.show();
      this.count_ligne = 6;
    }
    else if(this.count_ligne === 6 ){
      let x = $(".ligne6");
      x.show();
      this.count_ligne = 7;
    }
  }
  Del_ligne(){
    if(this.count_ligne === 2 ){
      let x = $(".ligne1");
      x.hide();
      this.count_ligne = 1;
    }else if(this.count_ligne === 3 ){
      let x = $(".ligne2");
      x.hide();
      this.count_ligne = 2;
    }
    else if(this.count_ligne === 4 ){
      let x = $(".ligne3");
      x.hide();
      this.count_ligne = 3;
    }
    else if(this.count_ligne === 5 ){
      let x = $(".ligne4");
      x.hide();
      this.count_ligne = 4;
    }
    else if(this.count_ligne === 6 ){
      let x = $(".ligne5");
      x.hide();
      this.count_ligne = 5;
    }
    else if(this.count_ligne === 7 ){
      let x = $(".ligne6");
      x.hide();
      this.count_ligne = 6;
    }
  }
  GenererPDF() {
      const doc = new jsPDF();

      const specialElementHandlers = {
        '#content' : function(element, renderer) {
          return true;
        }
      };

      const content = this.content.nativeElement;

      doc.fromHTML(content.innerHTML, 15, 15, {
        width: 190,
        elementHandlers : specialElementHandlers
      });

      doc.save('test.pdf');
  }
}

从'@angular/core'导入{Component，ElementRef，OnInit，ViewChild}；
从“jsPDF”导入*为jsPDF；
从“../models/design”导入{design}；
从“../models/Article_design”导入{Article_design}”；
从“Jquery”导入*为$；
从“../models/Article_origine”导入{Article_origine}”；
从“../shares/services/design/article origine.service”导入{ArticleOrigineService}”；
@组成部分({
选择器：“应用程序pdfmake”，
templateUrl:'./pdfmake.component.html'，
样式URL:['./pdfmake.component.scss']
})
导出类PdfmakeComponent实现OnInit{
@ViewChild（“内容”）内容：ElementRef；
helpdesk=“helpdesk”；
model_design:design={DEV_id:null，DEV_total_TTC:null，DEV_total_HT:null，DEV_ref:null，DEV_注意：null，DEV_id_part:null，DEV_id_article_design:null，DEV_etat:null，DEV_date:null}；
模型文章设计：文章设计[]=[null]；
模型u：数字[]=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]；
计数对齐=1；
AL_article_original:article_origine[]=[null]；
构造函数（专用ArticleOrigineService:ArticleOrigineService）{
}
ngOnInit（）：void{
for（设i=0；i{
这篇文章原创=成功；
for（设i=0；i{
console.log（“获取原件时出错”）；
console.log（错误）；
}
)
}
添加_ligne（）{
如果（this.count_ligne==1）{
设x=$（“.ligne1”）；
x、 show（）；
此.count_ligne=2；
}else if（this.count_ligne==2）{
设x=$（“.ligne2”）；
x、 show（）；
此.count_ligne=3；
}
else if（this.count_ligne==3）{
设x=$（“.ligne3”）；
x、 show（）；
此.count_ligne=4；
}
else if（this.count_ligne==4）{
设x=$（“.ligne4”）；
x、 show（）；
此.count_ligne=5；
}
else if（this.count_ligne==5）{
设x=$（“.ligne5”）；
x、 show（）；
此.count_ligne=6；
}
else if（this.count_ligne==6）{
设x=$（“.ligne6”）；
x、 show（）；
此.count_ligne=7；
}
}
德鲁·利尼（）{
如果（this.count_ligne==2）{
设x=$（“.ligne1”）；
x、 隐藏（）；
此.count_ligne=1；
}else if（this.count_ligne==3）{
设x=$（“.ligne2”）；
x、 隐藏（）；
此.count_ligne=2；
}
else if（this.count_ligne==4）{
设x=$（“.ligne3”）；
x、 隐藏（）；
此.count_ligne=3；
}
else if（this.count_ligne==5）{
设x=$（“.ligne4”）；
x、 隐藏（）；
此.count_ligne=4；
}
else if（this.count_ligne==6）{
设x=$（“.ligne5”）；
x、 隐藏（）；
此.count_ligne=5；
}
else if（this.count_ligne==7）{
设x=$（“.ligne6”）；
x、 隐藏（）；
此.count_ligne=6；
}
}
GenererPDF（）{
const doc=new jsPDF（）；
const specialElementHandlers={
“#内容”：函数（元素、渲染器）{
返回true；
}
};
const content=this.content.nativeElement；
doc.fromHTML（content.innerHTML，15,15{
宽度：190，
ElementHandler:SpecialElementHandler
});
doc.save（'test.pdf'）；
}
}

服务台

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../../environments/environment.prod';
import {Article_origine} from '../../../models/article_origine';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ArticleOrigineService {
  baseUrl = environment.baseUrl;
  AO_URL  = `${this.baseUrl}WEB_ARTICLE_ORIGINE/`;
  ADD_ARTICLE_ORIGINE_URL = this.AO_URL+"ADD_ARTICLE_ORIGINE";
  GET_ONE_ARTICLE_ORIGINE_URL = this.AO_URL+"GET_ONE_ARTICLE_ORIGINE";
  GET_ALL_ARTICLE_ORIGINE_URL = this.AO_URL+"GET_ALL_ARTICLE_ORIGINE";
  DELETE_ARTICLE_ORIGINE_URL = this.AO_URL+"DELETE_ARTICLE_ORIGINE";
  constructor(private http: HttpClient) { }


  ADD_ARTICLE_ORIGINE(ArticleOrigine: Article_origine): Observable<any> {
    return this.http.post(this.ADD_ARTICLE_ORIGINE_URL, ArticleOrigine);
  }
  GET_ONE_ARTICLE_ORIGINE(id: number): Observable<any> {
    return this.http.get(this.GET_ONE_ARTICLE_ORIGINE_URL + id);
  }
  GET_ALL_ARTICLE_ORIGINE(): Observable<any> {
    return this.http.get(this.GET_ALL_ARTICLE_ORIGINE_URL);
  }
  DELETE_ARTICLE_ORIGINE(id: number): Observable<any> {
    return this.http.get(this.DELETE_ARTICLE_ORIGINE_URL + id);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“../../../../environments/environment.prod”导入{environment}；
从“../../../models/Article_origine”导入{Article_origine}”；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类ArticleOrigineService{
baseUrl=environment.baseUrl；
AO_URL=`${this.baseUrl}WEB_ARTICLE_ORIGINE/`；
ADD\u ARTICLE\u ORIGINE\u URL=this.AO\u URL+“ADD\u ARTICLE\u ORIGINE”；
GET\u ONE\u ARTICLE\u ORIGINE\u URL=this.AO\u URL+“GET\u ONE\u ARTICLE\u ORIGINE”；
GET\u ALL\u ARTICLE\u ORIGINE\u URL=this.AO\u URL+“GET\u ALL\u ARTICLE\u ORIGINE”；
DELETE\u ARTICLE\u ORIGINE\u URL=this.AO\u URL+“删除