Javascript 角度反应形式-绑定除[值]之外的其他属性

我有一个带选择框的角度反应形式，如下所示：

<select formControlName="incomeSourceId">
    <option value="" disabled >Select a source</option>
    <option *ngFor="let source of primarySourceIncome"  [value]="source.value">{{source.viewValue}}</option>
</select>

但是，这是可行的，我的逻辑是基于该值的，该值是从服务器返回的ID。我更愿意构建这个逻辑来检查

{{source.viewValue}}

，这不会改变。如何将另一个属性绑定到表单

？NgModel在表单组中不起作用。

<select formControlName="incomeSourceId">
    <option value="" disabled >Select a source</option>
    <option *ngFor="let source of primarySourceIncome"  [ngValue]="source.value">{{source.viewValue}}</option> // change to [ngValue]
</select>

选择一个源
{{source.viewValue}}//更改为[ngValue]

如果该值不是字符串，则必须使用[ngValue]=“…”。 [值]=“…”仅支持字符串

选择一个源
{{source.viewValue}}//更改为[ngValue]

如果该值不是字符串，则必须使用[ngValue]=“…”。 [值]=“…”仅支持字符串

---

您可以使用当前primarySourceIncome的索引作为值：

<option *ngFor="let source of primarySourceIncome; index as i" [value]="i">{{source.viewValue}}</option>

{{source.viewValue}

---

如果选择输入的值对于保存很重要，那么在保存之前，您需要在primarySourceIncome中查找该索引，并将该值设置为实际值。

您可以使用当前primarySourceIncome的索引作为值：

<option *ngFor="let source of primarySourceIncome; index as i" [value]="i">{{source.viewValue}}</option>

{{source.viewValue}

---

如果选择输入的值对于保存很重要，那么在保存之前，您需要在primarySourceIncome中查找该索引，并将该值设置为实际值。

可能看起来像是一种解决方法，但我认为它仍然是干净的

在select中有一个

（change）

事件，我们只需使用

find（）

在数组中查找具有该

值的对象。通过这种方式，我们可以得到相应的
viewValue
值。在本例中，当名称很长时，我喜欢将它们存储在变量中，以便于使用，所以对于formcontrol，我会在构建表单后执行此操作

this.idCtrl = this.applicationForm.get('incomeSourceId');

然后由
select
触发的
change
事件，我们只需将所选对象的
viewValue
分配给变量
viewVal

findViewValue() {
  this.viewVal = this.primarySourceIncome.find(x => 
     x.value == this.idCtrl.value).viewValue
}

既然您提到了
viewValue
并没有改变，我们就在这里使用了模板中的字符串文本。此外，我在这里使用了
[ngSwitch]
，我认为：）因此，例如，模板可以如下所示：

<div [ngSwitch]="viewVal">
  <div *ngSwitchCase="'Employee'">Employee</div>
  <div *ngSwitchCase="'Manager'">Manager</div>
</div>


雇员
经理

此外，这还消除了在模板中调用“不必要的”
get
请求的麻烦。
似乎是一种解决方法，但我认为它仍然是干净的

在select中有一个
（change）
事件，我们只需使用
find（）
在数组中查找具有该
值的对象。通过这种方式，我们可以得到相应的
viewValue
值。在本例中，当名称很长时，我喜欢将它们存储在变量中，以便于使用，所以对于formcontrol，我会在构建表单后执行此操作

this.idCtrl = this.applicationForm.get('incomeSourceId');

然后由
select
触发的
change
事件，我们只需将所选对象的
viewValue
分配给变量
viewVal

findViewValue() {
  this.viewVal = this.primarySourceIncome.find(x => 
     x.value == this.idCtrl.value).viewValue
}

既然您提到了
viewValue
并没有改变，我们就在这里使用了模板中的字符串文本。此外，我在这里使用了
[ngSwitch]
，我认为：）因此，例如，模板可以如下所示：

<div [ngSwitch]="viewVal">
  <div *ngSwitchCase="'Employee'">Employee</div>
  <div *ngSwitchCase="'Manager'">Manager</div>
</div>


雇员
经理

另外，这也减少了在模板中调用“不必要的”
get
请求。
所以您的意思是说
[value]
在这种情况下不起作用。[value]=“source.value”设置为从服务器填充并发送到服务器的id。它可能会更改，而{{source.viewValue}}将保持不变，是一个字符串，如“Employed”，是否有任何答案适合您的需要？：）所以你的意思是说在这种情况下，
[value]
不起作用。[value]=“source.value”设置为从服务器填充并发送到服务器的id。它可能会更改，而{{source.viewValue}}将保持不变，是一个字符串，如“Employed”，是否有任何答案适合您的需要？：）