From a webService, I would like to display the data.
The error message is:
error TS2339: Property 'num' does not exist on type 'CustomerTransfert[]'.
I share the JSON file with you, I would just like to display the value of the NUM
variable.
I made a console.log I recover the data
private getCustomerTransfert(): void {
this.service.getCustomerTransfert().pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
console.log("Step 1");
this.customerTransferts = res.PREA.map(val => {
console.log("Result => " + JSON.stringify(res.PREA));
return {
cler: val.CLER,
num: val.NUM,
ref_rbc: val.REF_RBC,
type: val.TYPE,
quantite: val.QUANTITE,
isin: val.ISIN,
trade_date: val.TRADE_DATE,
reception_date: val.RECEPTION_DATE,
statut: val.STATUT,
label: val.LABEL,
}
});
});
}
The complete code
export class CustomerTransfertDetailsComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject < void > ();
customerTransferts: CustomerTransfert[] = [];
constructor(private service: CustomerTransfertDetailsService, private http: HttpClient) { }
ngOnInit(): void {
this.getCustomerTransfert();
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
private getCustomerTransfert(): void {
this.service.getCustomerTransfert().pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
console.log("Step 1");
this.customerTransferts = res.PREA.map(val => {
console.log("Result => " + JSON.stringify(res.PREA));
return {
cler: val.CLER,
num: val.NUM,
ref_rbc: val.REF_RBC,
type: val.TYPE,
quantite: val.QUANTITE,
isin: val.ISIN,
trade_date: val.TRADE_DATE,
reception_date: val.RECEPTION_DATE,
statut: val.STATUT,
label: val.LABEL,
}
});
});
}
goBack(): void {
}
}
My problem in HTML
<div class="home-content">
<div class="container" *ngIf="customerTransferts">
<div class="pt-50">
<div class="breadcrumb d-flex justify-content-between border-bottom pb-3">
<h2>Détails d'un transfert </h2>
<button type="button" (click)="goBack()" class="btn btn-primary m-1 btnColor">Retour </button>
</div>
<div class="pt-3 container">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-hover table-striped spaceLeft">
<tbody>
<tr>
<th>N° de préavis</th>
<td> {{ customerTransferts.num}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
customer-transfert.response.ts
import {
ApiResponse
} from "src/shared/types/api.response";
export interface CustomerTransfertResponse extends ApiResponse {
PREA: {
CLER: string;
NUM: number;
REF_RBC: string;
TYPE: string;
QUANTITE: number;
ISIN: string;
TRADE_DATE: Date;
RECEPTION_DATE: Date;
STATUT: number;
LABEL: string;
} [];
}
customer-transfert.ts
export interface CustomerTransfert {
cler: string;
num: number;
ref_rbc: string;
type: string;
quantite: number;
isin: string;
trade_date: Date;
reception_date: Date;
statut: number;
label: string;
}
This is actually correct behavior. As per your codebase, the
this.customerTransferts = res.PREA.map(val => {
console.log("Result => " + JSON.stringify(res.PREA));
return {
cler: val.CLER,
num: val.NUM,
ref_rbc: val.REF_RBC,
type: val.TYPE,
quantite: val.QUANTITE,
isin: val.ISIN,
trade_date: val.TRADE_DATE,
reception_date: val.RECEPTION_DATE,
statut: val.STATUT,
label: val.LABEL,
}
});
the customerTransferts
is an Array and not an individual object.
Also, you can see in the error as well, that the num
does not exists on type CustomerTransfert[]
(This is an array type).
You have to use ngFor
too iterate over customerTransferts
array and then you can access the num
field.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.