如何在`select`控件中动态设置默认值

Question

我订阅 HTTP 服务器以接收数据，之后我的

select

控件将通过 Angular 框架加载数据。 我的目标是设置默认值。 我的默认值由我从服务器收到的对象的三个值组成，用“/”分隔，因此 HTML 代码如下所示：

<label>{{ functionStr }}</label>
<select #element formControlName="selectedUser" class="form-select" (change)="changeClient($event)">
    <option *ngFor="let account of accountsAvailable4Function">{{ account.firstName }}/{{ account.lastName }}/{{ account.email }}
    </option>
</select>

初始化时我已经使用了默认值

FormGroup

:

var selected = this.accountsAvailable4Function[1].firstName+"/"+this.accountsAvailable4Function[1].lastName+"/"+this.accountsAvailable4Function[1].email
this.form = this.formBuilder.group({
      scheduledDate: ['', Validators.required],
      selectedUser: [selected, [Validators.required]],
    });

这会引发异常，因为我的

accountsAvailable4Function

数组尚未初始化。

我尝试使用

FormGroup

控件进行设置，如下所示。这也不起作用，因为我怀疑控件尚未加载：

var selected = this.accountsAvailable4Function[1].firstName+"/"+this.accountsAvailable4Function[1].lastName+"/"+this.accountsAvailable4Function[1].email
this.f['selectedUser'].setValue(selected);
      

是否有一些我可以监听的事件，以便在加载选择控件时通知我？

附： 正在加载

accountsAvailable4Function

数组：

this.accountService.getAll()
      .pipe(first())
      .subscribe({
        next: (accounts: Account[]) => {
          accounts.forEach(account => {
            account.userFunctions.forEach(userFunc => {
              if(userFunc.userFunction == this.functionStr) {
                this.accountsAvailable4Function.push(account);
              }
            });
          });
          
          /* HTML select control selects by default first element - verify it*/
          this.selectedAccount = this.accountsAvailable4Function[0];
          this.dataSource = new MatTableDataSource(this.accountsSelected4Function);
          this.dataSource.paginator = this.paginator;

        },
        complete: () => {
          this.accountsLoaded = true;
          var selected = this.accountsAvailable4Function[1].firstName+"/"+this.accountsAvailable4Function[1].lastName+"/"+this.accountsAvailable4Function[1].email
          this.f['selectedUser'].setValue(selected);
        },
        error: error => {
          this.alertService.error(error);
          this.accountsLoaded = true;
        }
      });         

Answer 1

从当前代码中，您缺少

value

元素的

<option>

属性。这导致

<option>

元素的值默认为空字符串。因此，您会看到

<select>

元素未与默认值绑定。

您需要将

value

中提到的

<option>

属性设置为 模板表达式

[]

。

<select #element formControlName="selectedUser" class="form-select" (change)="changeClient($event)">
  <option *ngFor="let account of accountsAvailable4Function" 
    [value]="account.firstName + '/' + account.lastName + '/' + account.email">
      {{ account.firstName }}/{{ account.lastName }}/{{ account.email }}
  </option>
</select>