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],
                                });
                        }
        });});});

  }

这是我表格的一部分。一切正常，但不能选择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。对于以后的问题，如果您对代码中的特定部分有疑问（在本例中为表单），则可以省略其余的formcontrol（就像我在stackblitz中所做的那样）。当问题被清楚地呈现并且不需要通读一堆无关的代码时，阅读起来会容易得多。

Answer 2

我没有完全解决问题。但是，如果选择未填充数据，则可能是拼写错误。

this.serveur_rebond = srv[0];

和

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

或者它可能是srv是and list并且您仅采用第一个元素

简化代码并提供更好的变量，以便您更容易发现问题所在。

此调用可以单独完成。并给成员起一个更好的名字：

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

添加

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

更改
```
 this.serveur_rebond = srv[0];
```

类似于：

 this.defaultEquipmentRebond = srv[0];

init方法应类似于：

getEquipementRebond
使用嵌套调用的默认设备登录登录。然后您填充并以反应形式创建默认数据

如何正确填写表格中的下拉列表？

2 个答案: