Question

我有一个选择字段，用于填充数据，如下所示。我将数据项填充为它们的名称。我的目标是选择数据的名称及其对应的ID。这是我的HTML模板：

<select class="custom-select d-block w-100" id="test" [(ngModel)]="record.firstName" #firstName="ngModel" name="firstName">
    <option value="">Choose...</option>
    <option *ngFor="let item of items" value="{{ item.name}}">{{ item.name }}</option>
</select>

当我从下拉菜单中选择一项时，record.firstName被设置为item.name。我想知道当我选择同一项目时也如何检索item.id。我找不到解决此问题的资源或教程。任何帮助将不胜感激！

Answer 1

您可以使用item.name将选项值设置为item对象，而不是将其设置为[ngValue]。这将允许您访问所选项目的任何属性。如有必要，您可以处理ngModelChange事件以进行其他处理。

<select [(ngModel)]="selectedItem" (ngModelChange)="processSelectedItem($event)" ...>
    <option [ngValue]="undefined">Choose...</option>
    <option *ngFor="let item of items" [ngValue]="item">{{ item.name }}</option>
</select>

例如，您可以使用以下命令将record设置为所选项目的修改版本：

processSelectedItem(item) {
    this.record.firstName = item.name;
    this.record.item_id = item.id;
}

或者，您可以将选项绑定到item.id（我假设id是唯一的），然后在record.firstName事件处理程序中设置ngModelChange：

<select [(ngModel)]="record.item_id" (ngModelChange)="processSelectedItem($event)" ...>
    <option value="-1">Choose...</option>
    <option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>

具有：

processSelectedItem(itemId) {
    this.record.firstName = this.items.find(x => x.id === itemId).name;
}

在Angular中选择时如何检索ID和名称？

1 个答案: