angular - 如何将两个值放在 html 列表中，然后只读取一个值以在 {{ }} 中显示

Question

如何将两个值放在 html 列表中，然后只读取一个值以显示在
<p>{{ ? }}</p> ？

<option *ngFor="let pdcSol of this.readSolHeatPumps" [value]="[pdcSol.denumire, pdcSol.cod]">{{ pdcSol.denumire }}</option>

<p>{{  this.formSol.controls['modelPDC'].value }}</p>

在这种情况下，在段落中我将有两个选项，但我只想显示其中一个..

谢谢!

Answer 1

在您的示例中，[value]="[pdcSol.denumire, pdcSol.cod]" 将产生不可预测的效果，因为 native value 仅支持字符串输入，而您正在将其映射到二元数组。在下面的示例中，我将其替换为一些通用的 id 值，仅作为示例。

尝试从控件中提取选定的值:

<select #ctrl="ngModel" [(ngModel)]="someVariable">
    <option *ngFor="let pdcSol of this.readSolHeatPumps" [ngValue]="pdcSol.id">{{ pdcSol.denumire }}</option>
</select>

然后在模板中尝试访问它:

<p>{{ ctrl.value }}</p>

除此之外，我假设您使用的是响应式表单，然后所选值应在 select 引用控件中可访问。但是，您的问题和代码片段说实话非常模糊

编辑

假设您希望显示列表中选择的值，因为您没有明确说明。