在 Angular 中是否可以在选项中显示一个值但将一个数组返回给 ngModelChange？答案

【问题标题】：Is it possible in Angular to display a value in an option but return an array to the ngModelChange?在 Angular 中是否可以在选项中显示一个值但将一个数组返回给 ngModelChange？
【发布时间】：2020-04-07 21:17:35
【问题描述】：

我正在尝试组织一个下拉列表，该列表将向用户显示单个值，但也会在更改选择时传回一个数组对象。

目前我有一个名为 classificationresult 的数组，其中包含 3 个元素 CLASSIFICATION_NAME、GROUP_ID、GROUP_NAME。

当用户选择特定的 CLASSIFICATION_NAME 时，我想传回包含上面列出的所有 3 个元素的整个数组结果。

目前，除了在加载时在下拉框中显示 CLASSIFICATION_NAME 之外，以下代码适用于所有内容。单击后它会显示列表，但在单击之前它以空白开头。有任何解决这个问题的方法吗？我相信显示元素与 [ngValue] 相关联，但这也是我用来传回整个数组而不是只传回一个数组的方法。

任何帮助将不胜感激。

<p>Select Classification*</p>
<select  [(ngModel)]="selectedClassification (ngModelChange)="changedClassification($event)">
<option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>

Summary -- I want my drop down list to always have a value shown to the user (value being the Classification Name) but when one is selected I want the entire array to pass to the changedClassification功能。此外，有时在用户从该页面上的其他下拉列表中进行选择后，它们也会变为空白，但如果再次选择它们，它们将填充。

【问题讨论】：

如果组件中已经有数据，为什么不直接过滤数据并将其转换为ngModelChange中的数组？
这帮我解决了，非常感谢。

标签： html angular typescript angular2-ngmodel

【解决方案1】：

如果一切都按您的预期运行除了显示的初始值，我想知道您是否需要[compareWith] 函数。我不知道您的 classificationresult 模型是什么样的，但如果我不得不猜测一下，在您的 <select> 元素上放置一个 [compareWith] 函数可以解决问题。

Here is an article 再解释一下。

我以this Stackblitz 为例，使用了[compareWith] 函数。在我的演示中，我使用的是 ReactiveForms，但 compareWith 应该还是一样的。

对于您的代码，它可能类似于：

<p>Select Classification*</p>
  <!-- add this [compareWith] -->
  <select [compareWith]="myCompareFunc" [(ngModel)]="selectedClassification" (ngModelChange)="changedClassification($event)">
  <option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>

在您的 .ts 文件中：

export class YourComponent {
  // all your component code.. 

  /* compare function, change the logic to fit your needs */
  myCompareFunc (classificationRes1: any, classificationRes2: any): boolean {
    return classificationRes1 && classificationRes2 
      ? classificationRes1.CLASSIFICATION_NAME === classificationRes2.CLASSIFICATION_NAME
      : classificationRes1 === classificationRes2
  }
}

如果这不能解决您的问题，您可能需要发布更多 .ts 代码和数据模型。

【讨论】：