javascript - ngOnInit 未定义的角度初始化变量（数组、对象）|| 接收到 Json 对象，没有对象的可访问属性
问题描述
我在执行我的组件 pdfMaker 时遇到了 Angular 9 的问题，标题解释了我的问题，其他方面，当我实例化我的变量（影响之前的数组 ans 对象）和 NgInit 之后在 HTML 中为空（未定义）和控制台日志。当我使用 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>
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');
}
}
服务.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);
}
}
解决方案
推荐阅读
- javascript - 基于用户搜索的php查看页面
- python - Python/Discord 用户名更改阻止我的机器人识别玩家
- go - 我在哪里获得 Golang 的 Radius MSCHAPv2 中的密码？
- bash - Bash：在主目录中的任何 bash 命令中使用星号退出并出现错误“无法识别的选项 --list-sessions”
- maven - 在 Maven 依赖中只包含几个包
- python - 如何在python tkinter中使两个按钮彼此相邻（并居中）？
- javascript - 如何在 JS 中获取 IP 地址 - Firefox Addon Devloment
- crash - UE4.25 - 游戏崩溃并将关闭
- swift - Swift - 如何获取 indexPath.row 或类似的部分
- javascript - 如何为没有销售的月份添加 0？