Angular переменные инициализации (массивы, объекты) не определены в ngOnInit || Получено Json Объект, нет приемлемых атрибутов объектов - PullRequest
Новая
       0

Angular переменные инициализации (массивы, объекты) не определены в ngOnInit || Получено Json Объект, нет приемлемых атрибутов объектов

1 голос
/ 13 марта 2020

Я сталкиваюсь с проблемой с Angular 9 при выполнении моего компонента pdfMaker, заголовок объясняет мою проблему, в другом случае, когда я создаю экземпляр моих переменных (массивы и объекты до воздействия) и после того, как NgInit thoes пусты ( не определено) в HTML и console.log. Проблема та же, когда я использую rx js для наблюдения 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>

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

Service.ts 

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);
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...