angular - 数据未以下拉模板驱动形式显示

Question

有一个模板驱动的表单，在这个表单中，有一个下拉菜单。我想从后端显示数据到下拉列表。

这里的数据来自后端appliesWhenData。

<form #appliesWhen="ngForm">
        <section class="form-inline" *ngFor="let awhen of appliesWhenData; let i = index;">
          <div class="col-auto my-1">
            <select class="custom-select mr-sm-2 form-control">
              <option [ngValue]="" disabled >Select field</option>
              <option [ngValue]="f" *ngFor="let f of fieldList">{{f.displayName}}
              </option>
            </select>
          </div>
</section>
</form>

如果我登录appliesWhenData它会打印：

[
  {
    "id": 1,
    "detailSrl": 5,
    "value": "123",
    "local_id": 1,
    "fieldListDetail": {
      "id": 5,
      "fieldName": "officeLocation",
      "displayName": "OfficeLocation"
    },
    "conditionListDetail": {
      "id": 1,
      "condition": "Equals"
    }
  },
  {
    "id": 2,
    "detailSrl": 5,
    "value": "321",
    "local_id": 2,
    "fieldListDetail": {
      "id": 3,
      "fieldName": "productType",
      "displayName": "ProductType"
    },
    "conditionListDetail": {
      "id": 4,
      "condition": "LessThanEquals"
    }
  }
]

到目前为止我已经尝试过：

<form #appliesWhen="ngForm">
        <section class="form-inline" *ngFor="let awhen of appliesWhenData; let i = index;">
          <div class="col-auto my-1">
            <select class="custom-select mr-sm-2 form-control" [(ngModel)]="awhen.fieldListDetail" name="fieldName{{ awhen.id }}">
              <option [ngValue]="" disabled >Select field</option>
              <option [ngValue]="f" *ngFor="let f of fieldList">{{f.displayName}}
              </option>
            </select>
          </div>
</section>
</form>

只有我需要在 drop 中显示选定的数据。来自后端的选定数据在appliesWhenData.fieldListDetail其中，并且将存在的列表是fieldList。请帮忙！

Answer 1

请尝试像这样绑定数据：

          <option [ngValue]="f" *ngFor="let f of fieldList">{{f.fieldListDetail.displayName}}
          </option>