Question

我正在使用Angular 5，并且有一个简单的Select：

  <select class="ui fluid dropdown" formControlName="device">
    <option *ngFor="let device of getSenderDevices()" [ngValue]="device">{{device.Name}}</option>
  </select>

我的问题是默认情况下未选择任何内容，但我希望选择第一个选项。我看到很多这样的线程，我认为可行的解决方案却没有：

  <select class="ui fluid dropdown" formControlName="device">
    <option *ngFor="let device of getDevices(); let i = index" [ngValue]="device" [selected]="i==0">{{device.Name}}</option>
  </select>

我还发现了一些使用compareWith指令的建议-但我无法理解它的工作原理。

问题可能出在getDevices（）上，该设备会延迟返回数据，因为数据是从外部服务器获取的。首先，选择必须为空，因为数据尚未准备好。但是，当它到达时，我希望选择通过自动选择第一个选项来显示。

Answer 1

不使用功能getDevices（）也不使用.html中的[selected]

//I imagine you have a serviceData that return an observable
export class DataService {
    constructor(private httpClient HttpClient) {}
    public getDevices():Observable<any>
    {
          return this.httpClient.get("....");
    }
}

constructor(private fb:FormBuilder,private myservice:ServiceData){}
ngOnInit()
{
     this.myService.getDevices().subscribe(res=>{
            this.devices=res;
            this.createForm();
     })
     //If getDevices() simple return an array, not from service
     //   this.devices=getServices();
     //   this.createForm();
}
createForm()
{
   this.myForm=this.fb.group({device:this.device[0]})
}
<form [formGroup]="myForm">
<select class="ui fluid dropdown" formControlName="device">
    <!--NOT use [selected], when "device" get the value, the select show the value-->
    <!--I use the variables "devices"--->
    <option *ngFor="let device of devices; let i = index" 
          [ngValue]="device">{{device.Name}}</option>
  </select>
</form>

默认情况下，“选择”中未选择任何内容-如何解决？

1 个答案: