Question

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

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中的数组

2 个答案: