将角度信号值设置为 HTML 选择选项

Question

我有一个角度组件，它异步调用一些数据并将值存储在这样的信号上。

tipoSignal: WritableSignal<Tipo> = signal({}) as WritableSignal<Tipo>;


ngOnInit(): void {
   this.tipoService.getTipo().subscribe(tipoReturned =>
      this.tipoSignal.set(tipoReturned)
   );
}

在 HTML 方面，我有一个下拉菜单，允许选择其他 tipo 选项，如下所示：

<select class="dropdown" title="tipo_dropdown">
   <option *ngFor="let tipo of tiposArray()" [value]="tipo.id_tipo">{{tipo.formfactor}}</option> 
</select>

tiposArray() 也会在 ngOnInit*

上填充

问题是我不知道如何使存储在 tipoSignal() 上的值在下拉列表中默认选择。

我尝试添加另一个选项标签并使用 selected 但它不起作用，即使它起作用，它也会创建一个重复的条目（因为该值也在 tiposArray() 上）。不确定是否值得一提，但是 Tipo 对象只有唯一的 id 和形状因子，没有其他。

有什么建议不会让我必须摆脱信号吗？ （整个应用程序到处都使用信号，这个组件尤其充斥着信号）。

Answer 1

在您的示例代码中，选择未绑定到任何模型。 要仅显示默认选定值 - 来自

tipoSignal

的值，您可以将其绑定到选择的值

<select class="dropdown" title="tipo_dropdown" [value]="tipoSignal()?.id_tipo">
   <option *ngFor="let tipo of tiposArray()" [value]="tipo.id_tipo">{{tipo.formfactor}}</option> 
</select>