錯誤TS2339：型別“CustomerTransfert[]”上不存在屬性“num”

從 web 服務，我想顯示資料。

錯誤資訊是：

error TS2339: Property 'num' does not exist on type 'CustomerTransfert[]'.

在此處輸入影像描述

我與您共享JSON檔案，我只想顯示NUM變數的值。

我做了一個console.log 我恢復了資料

在此處輸入影像描述

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

完整的代碼

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 {

    }

}

我在 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>

客戶轉移t.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;
    } [];
}

客戶轉帳.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;
}

uj5u.com熱心網友回復：

這實際上是正確的行為。根據您的代碼庫，

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

這customerTransferts是一個陣列，而不是一個單獨的物件。

此外，您還可以在錯誤中看到num型別不存在CustomerTransfert[]（這是一個陣列型別）。

您必須對陣列ngFor進行迭代customerTransferts，然后才能訪問該num欄位。

標籤：javascript 有角度的 打字稿

上一篇：無法弄清楚這個打字稿錯誤的原因

下一篇：React&Typescript-如何將計數器傳遞給父級