Question

为“角度材料选择”下拉菜单设置默认值的最佳方法是什么？垫选择正在调用填充下拉列表的API。然后，它预先选择defaultAddressFormat变量的值。它是通过订阅功能完成的。

好奇是否有更好的方法来做到这一点， this.addressService.getAddressFormatAll()是可观察的

预设值后，用户应该可以根据需要选择其他选择。

如果默认设置是在API完全加载之前设置的，则有时可能无法渲染，因此可以在subscription方法中调用。

this.addressService.getAddressFormatAll().subscribe(res => {
    this.addressFormatList = res.body;
    if (this.addressFormatList.length > 1) {
      this.addressHeaderForm.patchValue({ addressFormat: this.defaultAddressFormat });
    }
});


<mat-form-field>
     <mat-label>Address Format</mat-label>
     <mat-select
          formControlName = "addressFormat"
          [compareWith]="compareAddressFormatDataObjects"
          placeholder ="Select"
          (selectionChange)="addressFormatChangeEvent($event)" required >
          <mat-option (click)="addressHeaderForm.controls.addressFormat.reset()">Select</mat-option>
          <mat-option
               *ngFor="let addressFormatItem of addressFormatList"
               [value]="addressFormatItem"
           >
           {{addressFormatItem.addressFormatDescription}}
           </mat-option>
      </mat-select>
  </mat-form-field>

其他资源：

Set default option in mat-select

Angular Material: mat-select not selecting default

Answer 1

这已经是这样做的最佳方法之一。如您所知，HTTP请求是异步的，因此可以执行以下操作：

this.addressService.getAddressFormatAll().subscribe()
this.addressHeaderForm.patchValue({ addressFormat: this.defaultAddressFormat });

不起作用，因为patchValue的方法将在订阅getAddressFormatAll并返回之前被调用。

因此，您的代码是有效的，并且我认为不需要更改其中的任何内容。

当然，您可以选择通过RxJS管道来处理它，但这样做不会带来额外的好处，除非您正在处理其他操作，例如要调用的其他异步方法。

this.addressService.getAddressFormatAll()
  pipe(
    tap((res) => {
      this.addressFormatList = res.body;
      if (this.addressFormatList.length > 1) {
        this.addressHeaderForm.patchValue({ addressFormat: this.defaultAddressFormat });
      }
    }),
  ).subscribe();

或者，您可以使用异步管道。这样做的好处之一是，您无需手动取消订阅组件。

this.addressFormatList = this.addressService.getAddressFormatAll()

在您的component.html上，

<mat-option
  *ngFor="let addressFormatItem of addressFormatList | async"
  [value]="addressFormatItem"
>

角度：在API调用中选择的垫中设置默认值

1 个答案: