在 Angular 2 和 Typescript 中的数组中定义数组

Posted 2023-03-05

【中文标题】在 Angular 2 和 Typescript 中的数组中定义数组

【英文标题】：Define arrays within array in Angular 2 and Typescript

【发布时间】：2016-12-25 08:27:23

【问题描述】：

在 Angular 2 中，我想知道是否可以定义一个包含多个其他数组的数组。仅仅表明我的意思可能更容易：

我开始使用这个：

export class PaymentDetails 
     account: any[];
     bpNumber: number;

但这给了我一个问题，当我填充它时，我无法真正访问帐户数组中的数据，因为我想要其中包含更多数组。

所以现在我想这样定义我的类：

export class PaymentDetails 
    account: [
        debitAccount: [
            
                debitAccountId: string;
                debitBankCode: string;
                debitBankName: string;
                debitCountryCode: string;
                debitAccountNumber: string;
                debitAccountHolder: string;
                debitContinous: string;
                debitDueDate: string;
                iban: string;
                bic: string;
            
        ],
        ccAccount: [
            
                ccAccountId: string;
                ccCompanyCode: string;
                ccNumber: string;
                ccStart: string;
                ccExpiry: string;
                ccDsbTransactionId: string;
                ccCardholderName: string
            
        ]
    ];
    bpNumber: number;

这有可能吗？

这个类正在被这个 InMemoryDataService 填充

export class InMemoryDataService 
  createDb() 
let paymentDetailsDB = [
      
        account: [
          
            debitAccount: [
              
                debitAccountId: '8736583',
                debitBankCode: '45345',
                debitBankName: 'KSK HGTT',
                debitCountryCode: 'DE',
                debitAccountNumber: '123453463',
                debitAccountHolder: 'A Berg',
                debitContinous: '',
                debitDueDate: '',
                iban: 'DE12344235',
                bic: '324645',
              ,
              
                debitAccountId: '6567456',
                debitBankCode: '55463453',
                debitBankName: 'GRDFE',
                debitCountryCode: 'DE',
                debitAccountNumber: '000123492',
                debitAccountHolder: 'A Berg',
                debitContinous: '',
                debitDueDate: '',
                iban: 'DE43523453',
                bic: '123547665',
              
            ],

            ccAccount: [
              
                ccAccountId: '23413',
                ccCompanyCode: '254345',
                ccNumber: '238857827368837',
                ccStart: '2010-10-05',
                ccExpiry: '2018-10-05',
                ccDsbTransactionId: '235231',
                ccCardholderName: 'Anne Berg',
              
            ],
          
        ],
        bpNumber: 4711,
      
    ];
    return paymentDetailsDB;
  

【问题讨论】：

有效的 javascript 代码 == 有效的打字稿代码。看看这个：***.com/questions/966225/…

查看您的代码，我看到以下内容：（1）您的类定义说“我希望我的数组具有属性”但是（2）您填充 paymentDetailsDB 的代码声明“每个数组项都有子项数组”。 JS 不允许 #1 但 #2 完全有效（mxii 在下面写了一个 #2 实现的示例）

【参考方案1】：

您的定义应如下所示：

匿名类型变体：

export class PaymentDetails 
  accounts:
  
    debitAccounts:
    
      debitAccountId: string;
      debitBankCode: string;
      debitBankName: string;
      debitCountryCode: string;
      debitAccountNumber: string;
      debitAccountHolder: string;
      debitContinous: string;
      debitDueDate: string;
      iban: string;
      bic: string;
    [],

    ccAccounts:
    
      ccAccountId: string;
      ccCompanyCode: string;
      ccNumber: string;
      ccStart: string;
      ccExpiry: string;
      ccDsbTransactionId: string;
      ccCardholderName: string
    [],

    bpNumber: number;
  ;

命名类型（你应该使用这个！:]）

export class DebitAccount 
  Id: string;
  BankCode: string;
  BankName: string;
  CountryCode: string;
  Number: string;
  Holder: string;
  Continous: string;
  DueDate: string;
  iban: string;
  bic: string;


export class CcAccount 
  Id: string;
  CompanyCode: string;
  Number: string;
  Start: string;
  Expiry: string;
  DsbTransactionId: string;
  CardholderName: string


export class Account 
  debitAccounts: DebitAccount[];
  ccAccounts: CcAccount[];
  bpNumber: number;


export class PaymentDetails 
  account: Account[];

【讨论】：

似乎最终结果是相同的（或者至少当我在控制台中显示它时，json scructure 是相同的）。然而，这更优雅，更容易理解。原来，我最初的问题是我错误地访问了里面的数组和对象......这篇文章对***.com/questions/11922383/…

有很大帮助

@mxii 很抱歉在评论框中提问，因为我禁止在此平台上提问。我怎样才能访问这个数组变量[Array(2)] 0: Array(2) 0: id: 5, name: "Eternis", … 1: id: 4, name: "Sprenza", … length: 2 __proto__: Array(0) length: 1 __proto__: Array(0)。我正在尝试这种方式*ngFor="let item of bookedItems" 。但我没有任何建议？

【参考方案2】：

嵌套数组可以定义如下：

  items = [
     name:'xyz', subMenuItem:[name:'abc', name:'cde'], icon:'home',
     name:'pqr', subMenuItem:[name:'abc', name:'cde'], icon:'home',
    ];