Angular

Question

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

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

我了解{{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

您可以在组件的 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);
  }

}

Answer 2

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

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

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

Angular - HTML - pass selected value from drop down to TS method on button click

html

data-binding

collections

typescript