在数组内部迭代数组 Angular 4

Question

如何在 angular 4 中的 select 选项中的数组中迭代这些数组？我在下面有这个代码。它产生多个 select 选项而不是单个 select 选项的问题。我只想迭代 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
      }
    ]
  },
]

Answer 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;
}

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

在数组内部迭代数组 Angular 4

Iterate Array Inside of Array Angular 4

arrays

select

angular

angular-forms