Angular项目中TS2339错误：CustomerTransfert[]类型不存在num属性的数据显示问题咨询

这个错误的核心原因很明确：你在模板里把数组类型的customerTransferts当成了单个对象来访问num属性。从代码来看，customerTransferts被定义为CustomerTransfert[]（数组），但你在HTML里直接写了{{ customerTransferts.num }}——数组本身没有num属性，只有数组里的每个CustomerTransfert对象才有这个属性。

接下来分两种场景给你具体的解决方案：

场景1：详情页只需要展示单条数据（PREA数组仅有一个元素） #

从页面标题"Détails d'un transfert"（单笔转账详情）来看，接口返回的PREA数组应该只有一条数据，那你可以调整组件和模板的代码：

1. 修改组件代码 #

把数组类型的变量改成单个对象类型：

export class CustomerTransfertDetailsComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject < void > ();
  // 改为单个对象，初始值设为undefined
  customerTransfert: CustomerTransfert | undefined; 

  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");
      // 取PREA数组的第一个元素进行映射赋值
      const preadata = res.PREA[0];
      this.customerTransfert = {
        cler: preadata.CLER,
        num: preadata.NUM,
        ref_rbc: preadata.REF_RBC,
        type: preadata.TYPE,
        quantite: preadata.QUANTITE,
        isin: preadata.ISIN,
        trade_date: preadata.TRADE_DATE,
        reception_date: preadata.RECEPTION_DATE,
        statut: preadata.STATUT,
        label: preadata.LABEL,
      };
    });
  }

  goBack(): void { }
}

2. 修改HTML模板 #

使用**可选链操作符?.**避免空值报错，同时访问单个对象的num属性：

<div class="home-content">
  <div class="container" *ngIf="customerTransfert"> <!-- 判断单个对象是否已加载 -->
    <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> {{ customerTransfert?.num}} </td> <!-- 访问单个对象的num属性 -->
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

场景2：需要展示多条转账数据（PREA数组包含多个元素） #

如果接口返回的是多条数据，你需要在模板中用*ngFor遍历数组：

修改HTML模板 #

在表格的<tr>上添加*ngFor循环，遍历数组中的每个对象：

<div class="home-content">
  <div class="container" *ngIf="customerTransferts.length > 0"> <!-- 判断数组是否有数据 -->
    <div class="pt-50">
      <div class="breadcrumb d-flex justify-content-between border-bottom pb-3">
        <h2>Détails des transferts </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">
                  <thead>
                    <tr>
                      <th>N° de préavis</th>
                      <!-- 可按需添加其他表头字段 -->
                    </tr>
                  </thead>
                  <tbody>
                    <!-- 遍历数组，将每个元素赋值给transfert变量 -->
                    <tr *ngFor="let transfert of customerTransferts">
                      <th>N° de préavis</th>
                      <td> {{ transfert.num}} </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

组件代码无需修改（你已经正确将res.PREA映射为数组），但建议在模板里判断customerTransferts.length > 0，避免空数组时显示空表格。

额外提示 #

• 始终记得在模板中处理空值情况：用*ngIf判断数据是否加载完成，或者用可选链?.避免undefined/null报错。
• 可以在subscribe中增加空数组判断，比如如果res.PREA为空，给用户显示"暂无数据"的提示，提升页面体验。

内容的提问来源于stack exchange，提问作者mercyto