Ничего не выбрано в Select по умолчанию - как это исправить? - PullRequest
Новая
       9

Ничего не выбрано в Select по умолчанию - как это исправить?

0 голосов
/ 04 июля 2018

Я использую Angular 5, и у меня есть простой выбор: 

  <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>

Я также нашел несколько советов по использованию директивы сравнения с - но я не смог понять, как она работает.

Возможно, проблема вызвана getDevices (), который возвращает данные с некоторой задержкой, потому что данные выбираются с внешнего сервера. В начале выборка должна быть пустой, потому что данные еще не готовы. Однако, когда он прибудет, я бы хотел, чтобы выбор показывал это, автоматически выбирая первый вариант.

1 Ответ

0 голосов
/ 05 июля 2018

Не использовать функцию getDevices () и не использовать [selected] в .html 

//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>
...