下拉列表中的自动 select 值

Question

如何将一个值设置为下拉列表中的默认选定值？我正在使用 angular 8。我有以下 html

<div class="form-group">
        <label class="form-control-label col-form-label-sm">Content Type</label>
        <select class="form-control form-control-sm" [(ngModel)]="item.contentType"  formControlName="contentType" name="contentType">
          <option   *ngFor="let contentType of contentTypes" [value]="contentType.name" >{{contentType.displayName}}</option>
        </select>
      </div>

我已尝试使用 [selected]="contentType.name=='TEXT'"，但下拉列表仍未将默认选择值显示为 "Text Only"。

<div class="form-group">
        <label class="form-control-label col-form-label-sm">Content Type</label>
        <select class="form-control form-control-sm" [(ngModel)]="item.contentType" formControlName="contentType" name="contentType">
          <option *ngFor="let contentType of contentTypes" [value]="contentType.name" [selected]="contentType.name=='TEXT'">{{contentType.displayName}}</option>
        </select>
      </div>

contentTypes 是 [{"name":"TEXT","displayName":"Text Only"},{"name":"AUDIO","displayName":"Audio"},{"name":"VIDEO","displayName":"Video"}]

的数组

Answer 1

我可以通过这个例子让它工作

模板

<div class="form-group">
   <label class="form-control-label col-form-label-sm">Content Type</label>
   <select class="form-control form-control-sm" formControlName="contentType" 
         name="contentType">
      <option *ngFor="let contentType of contentTypes" [value]="contentType.name"> 
          {{contentType.displayName}}
      </option>
    </select> 
</div>

在 ts

// if you will give the value to the contentType control it will be selected item
// something like this 
export class ReleaseComponent implements OnInit {

   ngOnInit() {
      this.yourForm.get('contentType').patchValue('TEXT'); 
      // or
      this.yourForm.get('contentType').patchValue(this.contentTypes[0].name); 
   }
}

希望对您有所帮助

Answer 2

卡鲁

默认情况下 item.contentType 应该使用与您的 contentType 列表中的某个选项对应的值来初始化。例如，如果您使用值 TEXT 初始化 item.contentType，则默认情况下将预先 select 设置值 TEXT 的选项。

或者，您可以将 option 和 null 值与文本 Select content 放在一起（例如）。并验证它，如果需要的话。类似于：

<div class="form-group">
   <label class="form-control-label col-form-label-sm">Content Type</label>
   <select class="form-control form-control-sm" [(ngModel)]="item.contentType"
         name="contentType">
      <option [value]="null">Select content</option>
      <option *ngFor="let contentType of contentTypes" [value]="contentType.name"> 
          {{contentType.displayName}}
      </option>
    </select> 
</div>

不管怎样，不管您将使用哪种构建表单的方法 (Reactive forms or Template driven forms)。因为您在 select 组件的定义中犯了错误。如果您想使用模板驱动的表单模式，请仅使用 [(ngModel)] 定义并删除 formControlName="contentType"。首先在 link 提供的内容中学习。

Answer 3

在选项中使用[selected] 像这样。你选的条件不对，我觉得

<select class="form-control" [(ngModel)]="item.contentType">
   <option *ngFor="let contentType of contentTypes" [value]="contentType.name" [selected]="contentType.name==item.contentType">{{contentType.displayName}}</option>
</select>

下拉列表中的自动 select 值

Auto select value in dropdown

angular

angular8

ngx-select-dropdown