在数组 Angular 4 内迭代数组

问题描述

如何在 angular 4 的选择选项中的数组内迭代这些数组?我在下面有这个代码.它产生多个选择选项而不是单个选择选项的问题.我只想迭代 acct_type_name .我该如何解决这个问题?谢谢sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

TS

<select type="text" class="form-control"><option *ngFor="let accounts of account.account_types">{{accountss.acct_type_name }}</option></选择></ng-容器>

JSON

[{"account_type_cla_id": 1,"account_type_cla_name": "资产",created_at":空，updated_at":空，帐户类型":[{"acc_type_id": 1,"acc_type_cla_id": 1,"acct_type_name": "其他资产","acct_type_description": "其他资产",created_at":空，updated_at":空},{acc_type_id":2，"acc_type_cla_id": 1,"acct_type_name": "其他流动资产","acct_type_description": "其他流动资产",created_at":空，updated_at":空},{"acc_type_id": 3,"acc_type_cla_id": 1,"acct_type_name": "现金","acct_type_description": "现金",created_at":空，updated_at":空},{"acc_type_id": 4,"acc_type_cla_id": 1,"acct_type_name": "银行","acct_type_description": "银行",created_at":空，updated_at":空},{"acc_type_id": 5,"acc_type_cla_id": 1,"acct_type_name": "固定资产","acct_type_description": "固定资产",created_at":空，updated_at":空},{"acc_type_id": 6,"acc_type_cla_id": 1,"acct_type_name": "股票","acct_type_description": "库存",created_at":空，updated_at":空}]},{"account_type_cla_id": 2,"account_type_cla_name": "责任",created_at":空，updated_at":空，帐户类型":[{"acc_type_id": 7,"acc_type_cla_id": 2,"acct_type_name": "其他流动负债","acct_type_description": "其他流动负债",created_at":空，updated_at":空},{"acc_type_id": 8,"acc_type_cla_id": 2,"acct_type_name": "信用卡","acct_type_description": "信用卡",created_at":空，updated_at":空},{"acc_type_id": 9,"acc_type_cla_id": 2,"acct_type_name": "长期责任","acct_type_description": "长期责任",created_at":空，updated_at":空}]},{"account_type_cla_id": 3,"account_type_cla_name": "股权",created_at":空，updated_at":空，帐户类型":[{acc_type_id":10，"acc_type_cla_id": 3,"acct_type_name": "股权","acct_type_description": "股权",created_at":空，updated_at":空}]},]

解决方案

模板文件

<select type="text" class="form-control"><option *ngFor="let acct_type_name of getAcctTypeName()">{{ acct_type_name }}</option></选择></ng-容器>

如果您的示例数据在帐户属性中，请将其添加到打字稿文件

getAcctTypeName(){让 accountTypeName:string[]=[];this.accounts.forEach(account=>{account.account_types.forEach(accountTypeItem=>{accountTypeName.push(accountTypeItem.acct_type_name);});});返回帐户类型名称；}

How can i iterate these arrays inside of arrays in select option in angular 4? I have this codes below. The problem that it produces several select option instead of a single select option. I want to iterate the acct_type_name only. How can i solve this? Thankssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

<ng-container *ngFor="let account of accounts">
                      <select type="text" class="form-control">
                        <option *ngFor="let accountss of account.account_types">{{ accountss.acct_type_name }}</option>
                      </select>
                    </ng-container>

[
  {
    "account_type_cla_id": 1,
    "account_type_cla_name": "Assets",
    "created_at": null,
    "updated_at": null,
    "account_types": [
      {
        "acc_type_id": 1,
        "acc_type_cla_id": 1,
        "acct_type_name": "Other Asset",
        "acct_type_description": "Other Asset",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 2,
        "acc_type_cla_id": 1,
        "acct_type_name": "Other Current Asset",
        "acct_type_description": "Other Current Asset",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 3,
        "acc_type_cla_id": 1,
        "acct_type_name": "Cash",
        "acct_type_description": "Cash",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 4,
        "acc_type_cla_id": 1,
        "acct_type_name": "Bank",
        "acct_type_description": "Bank",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 5,
        "acc_type_cla_id": 1,
        "acct_type_name": "Fixed Asset",
        "acct_type_description": "Fixed Asset",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 6,
        "acc_type_cla_id": 1,
        "acct_type_name": "Stock",
        "acct_type_description": "Stock",
        "created_at": null,
        "updated_at": null
      }
    ]
  },
  {
    "account_type_cla_id": 2,
    "account_type_cla_name": "Liability",
    "created_at": null,
    "updated_at": null,
    "account_types": [
      {
        "acc_type_id": 7,
        "acc_type_cla_id": 2,
        "acct_type_name": "Other Current Liability",
        "acct_type_description": "Other Current Liability",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 8,
        "acc_type_cla_id": 2,
        "acct_type_name": "Credit Card",
        "acct_type_description": "Credit Card",
        "created_at": null,
        "updated_at": null
      },
      {
        "acc_type_id": 9,
        "acc_type_cla_id": 2,
        "acct_type_name": "Long Term Liability",
        "acct_type_description": "Long Term Liability",
        "created_at": null,
        "updated_at": null
      }
    ]
  },
  {
    "account_type_cla_id": 3,
    "account_type_cla_name": "Equity",
    "created_at": null,
    "updated_at": null,
    "account_types": [
      {
        "acc_type_id": 10,
        "acc_type_cla_id": 3,
        "acct_type_name": "Equity",
        "acct_type_description": "Equity",
        "created_at": null,
        "updated_at": null
      }
    ]
  },
]

解决方案

Template file

<ng-container>
    <select type="text" class="form-control">
    <option *ngFor="let acct_type_name of getAcctTypeName()">{{ acct_type_name }}</option>
  </select>
</ng-container>

If your sample data is in accounts property add this in typescript file

getAcctTypeName(){
  let accountTypeName:string[]=[];
  this.accounts.forEach(account=>{
    account.account_types.forEach(accountTypeItem=>{
      accountTypeName.push(accountTypeItem.acct_type_name);
    });
  });
  return accountTypeName;
}

这篇关于在数组 Angular 4 内迭代数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！