Angular项目中如何通过select标签传递完整accData对象至方法？

你的代码里存在一个问题：(change)="accountSelected(accData)"中的accData是*ngFor循环里option标签的局部变量，select标签的上下文无法访问到这个变量，所以实际传递给accountSelected方法的是undefined，没法拿到完整的accData对象。

下面给你两种可行的解决方式：

方式一：使用双向绑定[(ngModel)] #

这种方式更符合Angular的表单处理逻辑，也更直观。

步骤1：在组件类中定义绑定变量 #

// 建议根据实际业务定义具体类型，比如Account
selectedAccData: any;

步骤2：修改模板代码 #

<select 
    class="form-select form-select-sm" 
    aria-label=".form-select-sm example" 
    [disabled]="(appRoot.accountList | async)?.length === 1" 
    [(ngModel)]="selectedAccData"
    (change)="accountSelected(selectedAccData)"
>
    <option 
        *ngFor="let accData of (appRoot.accountList | async)" 
        [ngValue]="accData"
    >
        {{ accData.AccountName }}
    </option>
</select>

注意：这里可以去掉原来的[selected]属性，因为ngModel会自动根据selectedAccData的初始值匹配对应的option并设置选中状态。

方式二：通过change事件的$event获取选中对象 #

如果不想用双向绑定，也可以直接通过事件对象拿到选中的accData：

修改模板代码 #

<select 
    class="form-select form-select-sm" 
    aria-label=".form-select-sm example" 
    [disabled]="(appRoot.accountList | async)?.length === 1" 
    (change)="accountSelected(($event.target as HTMLSelectElement).value)"
>
    <option 
        *ngFor="let accData of (appRoot.accountList | async)" 
        [ngValue]="accData" 
        [selected]="accData.AccountName === selectedAccount"
    >
        {{ accData.AccountName }}
    </option>
</select>

组件类中的方法 #

accountSelected(selectedAcc: any) {
    // selectedAcc就是完整的accData对象
    console.log(selectedAcc);
}

内容的提问来源于stack exchange，提问作者Tushar Rawat