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 >
<div *ngIf="customerTransferts">
<div >
<div >
<h2>Détails d'un transfert </h2>
<button type="button" (click)="goBack()" >Retour </button>
</div>
<div >
<div >
<div >
<div >
<div >
<table >
<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;
}
CodePudding user response:
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.