Question

我最初的问题是这样的： Buliding dropdown/select dynamically via reactive forms angular 6

所以我更改为模板驱动形式，并且下拉菜单显示正常。

我现在的问题是在下拉列表中选择来自数据库的值。对我来说这不是真的。

这里是表格，以便您可以清晰看到图片

  <form (ngSubmit)="onSubmit(f)" #f="ngForm">

    <div class="form-group form-row" *ngFor="let f of features; let i=index;">
      <div class="col-lg-2 text-right"><label for="cmd{{f.FeatureId}}" class="col-form-label">{{f.FeatureCaption}} <app-required-star></app-required-star></label></div>
      <div class="col-lg-10">
        <!--custom-select-->
        <select class="form-control" id="cmd{{f.FeatureId}}" name="cmd{{f.FeatureId}}" [appAutoFocus]="i === 0" ngModel required>
          <option value="">Choose...</option>
          <option *ngFor="let fl of f.FeatureList" [value]="fl.FeatureId">{{fl.FeatureName}}</option>
        </select>
      </div>
    </div>

    <button type="submit" class="btn btn-primary btn-sm" [disabled]="!f.valid">Submit</button>

  </form>

我已经尝试过预选的其他内容，但没有任何内容适合我。选择始终为我选择。

1：将[attr.selected]="fl.IsSelected ? true : null"应用于选项。这导致出现以下html，并且其中存在selected属性。

<select _ngcontent-c14="" class="form-control ng-pristine ng-invalid ng-touched" ngmodel="" required="" 
    ng-reflect-required="" ng-reflect-name="cmdDoorStyle" ng-reflect-model="" ng-reflect-is-apply-auto-focus="true" 
    id="cmdDoorStyle">

    <option _ngcontent-c14="" value="" ng-reflect-value="">Choose...</option>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
    <option _ngcontent-c14="" value="DRS_SHAKER" ng-reflect-value="DRS_SHAKER" selected="true">Shaker</option>

</select>

2：将[attr.selected]="fl.IsSelected ? 'selected' : null"应用于选项。这导致出现以下html，并且其中存在selected属性。

<select _ngcontent-c14="" class="form-control ng-pristine ng-invalid ng-touched" ngmodel="" required="" 
    ng-reflect-required="" ng-reflect-name="cmdDoorStyle" ng-reflect-model="" ng-reflect-is-apply-auto-focus="true" 
    id="cmdDoorStyle">

    <option _ngcontent-c14="" value="" ng-reflect-value="">Choose...</option>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
    <option _ngcontent-c14="" value="DRS_SHAKER" ng-reflect-value="DRS_SHAKER" selected="selected">Shaker</option>

</select>

3：应用[value]="f.SelectedValue"进行选择，因为我有在父模型中可用的选定值。

<select _ngcontent-c14="" class="form-control ng-pristine ng-invalid ng-touched" ngmodel="" required="" 
    ng-reflect-required="" ng-reflect-name="cmdDoorStyle" ng-reflect-model="" ng-reflect-is-apply-auto-focus="true" 
    id="cmdDoorStyle">

    <option _ngcontent-c14="" value="" ng-reflect-value="">Choose...</option>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
    <option _ngcontent-c14="" value="DRS_SHAKER" ng-reflect-value="DRS_SHAKER">Shaker</option>

</select>

4：也尝试了patchValue。

  //for now using template driven form
  @ViewChild('f') configForm: NgForm

this.dataSubscription = this.projectSubService.getProjectSubConfig(this.subId).subscribe(
  res => {
    this.features = res.Features;
    //console.log(this.features);

    //pre-select using patchValye
    this.features.forEach(i => {
      this.patchValue('cmd'+i.FeatureId, i.SelectedValue);
    });
  },
  error => {
    handle...
  }
);

  patchValue(id: string, value: string) {
    //console.log(id + '---' + value);
    this.configForm.form.patchValue({
      id : value ? value : ''
    });
  }

我该如何克服这个问题？

Answer 1

通过选择[ngModel]="f.SelectedValue"上的数据绑定完成它

<select class="form-control" id="cmd{{f.FeatureId}}" name="cmd{{f.FeatureId}}" 
[appAutoFocus]="i === 0" [ngModel]="f.SelectedValue" required>

模板驱动形式的预选下拉值角度6

1 个答案: