Как правильно заполнить выпадающий список в форме?

Question

Привет, ребята, я пытаюсь обновить элемент, поэтому я хочу заполнить форму существующими значениями.Я успешно выполнил задачу, за исключением одного выпадающего списка.Я делаю несколько запросов, потому что большая часть данных зависит от других таблиц.Я пытаюсь поместить каждый запрос в обратный вызов предыдущего, но я не знаю, почему раскрывающийся список не заполняется правильно.

Вот моя функция ngOnInit

ngOnInit() {

    this.route.params.subscribe((params: Params) => this.id_equipement = params['id']);

    this.equipementService
      .getEquipementById(this.id_equipement)
      .subscribe((data) =>{ this.equipement = data[0];
        console.log(this.equipement);
//Get the list for the dropdown       
this.equipementService.getEquipementRebond().pipe(first()).subscribe(eqs => {
                this.srv_rebond = eqs;
                console.log(this.srv_rebond);
                this.loginService.getLoginById(this.equipement.idLogin).subscribe ((login) =>{
                        this.login = login[0];
                        console.log(this.login);
                        if (this.equipement.idNode != null){
 //Get the element to pre-fill the dropdown             this.equipementService.getEquipementById(this.equipement.idNode).subscribe ((srv) => {
                                     this.serveur_rebond = srv[0];
                                     console.log(this.serveur_rebond.Nom);

                                this.editEqForm = this.formBuilder.group({
                                        nom:[this.equipement.Nom, [Validators.required]],
                                        ip:[this.equipement.IP, [Validators.required]],
                                        srv_rebond:[this.serveur_rebond.Nom, [Validators.required]],
                                        auth:[this.equipement.auth, [Validators.required]],
                                        login:[this.login.Login, [Validators.required]],
                                        pwd:[this.login.Password, [Validators.required]],
                                        connex: [this.equipement.Connex],
                                        rebond:[this.equipement.rebond],
                                        }); });
                        }else {
                                this.serveur_rebond.Nom = 'Aucun';

                                this.editEqForm = this.formBuilder.group({
                                        nom:[this.equipement.Nom, [Validators.required]],
                                        ip:[this.equipement.IP, [Validators.required]],
                                        srv_rebond:[this.serveur_rebond.Nom],
                                        auth:[this.equipement.auth, [Validators.required]],
                                        login:[this.login.Login, [Validators.required]],
                                        pwd:[this.login.Password, [Validators.required]],
                                        connex: [this.equipement.Connex],
                                        rebond:[this.equipement.rebond],
                                });
                        }
        });});});

  }

Вот часть моей формы.Все работает, но не select formControlName = "srv_rebond"

 <form [formGroup]="editEqForm" (ngSubmit)="onSubmit();">
    <div class="col form-group">
      <label>nom</label>
      <input formControlName="nom" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.nom.errors }" type=
        <div *ngIf="submitted&&f.nom?.errors" class="invalid-feedback">
          <div *ngIf="f.nom?.errors.required">
            Le nom d'équipement est requis!
          </div>
        </div>
     </div>
    <div class="col form-group">
      <label>IP</label>
      <input formControlName="ip" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.ip.errors }" type="t
        <div *ngIf="submitted&&f.ip?.errors" class="invalid-feedback">
          <div *ngIf="f.ip?.errors.required">
            L'adresse IP est requise!
          </div>
        </div>
      </div>
    <div class="col form-group">
      <label>Serveur de rebond</label>
      <select formControlName="srv_rebond" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.srv_rebond.
        <option >Aucun</option>
        <option *ngFor="let srv of srv_rebond ">{{srv.Nom}}</option>
      </select>
              <div *ngIf="submitted && f.srv_rebond?.errors" class="invalid-feedback">
                <div *ngIf="f.srv_rebond?.errors.required">
                Le serveur de rebond est requis!
                </div>
        </div>
     </div>
    <div class="col form-group">
      <label>Authentification</label>
      <select formControlName="auth" [ngClass]="{ 'is-invalid': submitted && f.auth.errors }" class="form-control" >
                <option selected>SSH</option>
                <option>Telnet</option>
                <option>Login</option>
        </select>
        <div *ngIf="submitted && f.auth?.errors" class="invalid-feedback">
          <div *ngIf="f.auth?.errors.required">
             Le mode d'authentification est requis!
          </div>
        </div>
     </div>

Я думаю, что проблема в функции ngOnInit, но я не знаю где.Любое предложение?

Answer 1

Здесь при условии, что с остальными назначениями все в порядке ... Вы пропускаете [value] из ваших опций выбора.Если вы хотите, чтобы значением было свойство Nom, используйте его как значение:

<option *ngFor="let srv of srv_rebond" [value]="srv.Nom">{{srv.Nom}}</option>

STACKBLITZ DEMO

PS.Что касается будущих вопросов, если у вас есть проблема с определенной частью в вашем коде (в данном случае вашей формой), вы можете пропустить остальные формы управления (как я делал в stackblitz).Гораздо проще читать, когда проблема изложена четко и не нужно читать кучу несвязанного кода.

Answer 2

Я не до конца понял проблему.Но если это так, что выборка не заполнена данными, это может быть опечаткой.

this.serveur_rebond = srv[0];

и

 <option *ngFor="let srv of srv_rebond ">{{srv.Nom}}</option>

или может быть, что srv есть и список, и вы берете только первый элемент

Просто введите код и дайте лучшие переменные, чтобы вылегче понять, что не так.

1. Этот вызов может быть сделан отдельно.И дайте члену более подходящее имя:

   this.equipementService.getEquipementRebond().pipe(first())
    .subscribe(eqs =>{ 
       this.equipmentRebonds= eqs;
   });
   

2. добавить

   <form [formGroup]="editEqForm" *ngIf="editEqForm"
   

3. Изменить

    this.serveur_rebond = srv[0];
   

что-то вроде:

 this.defaultEquipmentRebond = srv[0];

Метод init должен выглядеть примерно так:

1. getEquipementRebond
2. вход в систему с вложенным вызовом для оборудования equipmentBond по умолчаниювызов.Затем вы заполнили и создали данные по умолчанию в реактивной форме