Angular - HTML - 在按钮单击时将选定值从下拉列表传递到 TS 方法

Question

我遇到的问题是我无法访问 {{selectItem}} 中的 .value 和 .id 以将它们发送回打字稿以便稍后发布 HTTP 帖子。虽然没有实际的错误，但我有例外，并且已经用谷歌搜索解决但无济于事。

抛出异常：System.Net.Sockets.dll 中的“System.IO.IOException” 抛出异常：System.Private.CoreLib.dll 中的“System.IO.IOException” 抛出异常：System.Net.Http.dll 中的“System.Threading.Tasks.TaskCanceledException” 抛出异常：System.Private.CoreLib.dll 中的“System.Threading.Tasks.TaskCanceledException” 抛出异常：System.Private.CoreLib.dll 中的“System.Threading.Tasks.TaskCanceledException”

我了解 {{selectedItem | json}} 只是将所选项目放入 JSON 表单，但我想简单地将 .id 和 .values 传递回按钮单击的方法。挣扎了一周左右。任何指导表示赞赏。

<div div class="main-search-user-name">
        <mat-form-field>
          <mat-label>Search Select User</mat-label>
          <mat-select [(ngModel)]="selectedItem">
            <mat-option *ngFor="let getddusers of getusers" [id]="getddusers.id" [value]="getddusers.value">
              {{getddusers.id}} {{getddusers.value}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        {{selectedItem | json}}
        <button type="button" class="btn btn-primary btn-sm">Search</button>
        <button type="button" class="btn btn-primary btn-sm" (click)="displayName('{{getddusers.id}}' + '{{getddusers.value}}')">Search</button>
</div>

Answer 1

您需要将属性绑定从 [value]="getddusers.value" 更改为 [value]="getddusers"。

这样做将确保selectedItem 代表整个对象，然后您可以在组件ts 文件中的displayName() 中简单地使用this.selectedItem.id 和this.selectedItem.value。

Answer 2

您可以在组件的displayName() 方法中使用selectedItem 变量。由于您在ngModel 中使用selectedItem，它将在组件中更新 即

//app.component.ts

export class AppComponent {
  selectedItem: any= null;
  
  displayName(){
     //you can use selectedItem here
    console.log("Selected user"+ this.selectedItem.id);
  }

}