在 Array Angular 4 中迭代数组答案

【问题标题】：Iterate Array Inside of Array Angular 4在 Array Angular 4 中迭代数组
【发布时间】：2018-01-16 11:54:20
【问题描述】：

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

TS

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

JSON

[
  {
    "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
      }
    ]
  },
]

【问题讨论】：

您想要一个下拉菜单来显示所有选项吗？目前它正确显示了您的模板方式。
@AshrafulIslam。是的，只有一个下拉菜单
三个不同帐户的所有acct_type_name？
@AshrafulIslam。是的，我想从三个不同的帐户中迭代 acct_type_name。
How to use nested ngFor in angular2的可能重复

标签： arrays angular select angular-forms

【解决方案1】：

模板文件

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

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

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

【讨论】：

最好关闭重复的问题而不是发布答案

【解决方案2】：

您只需将ng-container 放在select 标签内

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

【讨论】：

最好关闭重复的问题而不是发布答案
@faceturn，用户已经知道how to Iterate Array Inside of Array Angular 4，问题标签行错误，并且OP不清楚逻辑，正如您在代码中看到的那样，他已经实现了它，但不知道在哪里到。
@VivekDoshi。谢谢。你昨天解决了我的分页问题吗？
我需要一些工作示例，请您在stackblitz.com 上创建一个？
嗨维维克。你能帮我吗stackoverflow.com/questions/48860173/…