模板驅動表單預選下拉值 angular 6

Question

我最初的問題是： 通過反應形式 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

通過 select [ngModel]="f.SelectedValue"上的數據綁定完成

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