javascript - 如何在 Angular 8 中为 ngSubmit() 获取选定的下拉值？

Question

在我的项目中，我使用的是 Angular 8。 创建了根据用户 ID 将用户绑定(bind)到项目的方法，使用 postman 后端功能进行了测试，工作正常。

我的 bindUser 方法服务:

 bindUserToProject(userId: number, projectId: number) {
    const seperator = "/";
    const body = { userId, seperator, projectId };
    return this.http.post(this.baseUrl + '/bind/', body)
  }

组件:

export class AddProjectForUserComponent implements OnInit {
  users: any = {};
  projects: any = {};

  constructor(private router: Router, private projectService: ProjectService, private vmService: 
   VmService, private userService: UserService) { }

  ngOnInit() {
    this.users = this.getUsersForProject()
    this.projects = this.getProjects()
  }

  getUsersForProject() {
    this.projectService.getUsersForProject().subscribe(u => this.users = u);
  }

  getProjects() {
    this.vmService.getProjectsForVm().subscribe(p => this.projects = p)
  }

  goBackToUserProjects() {
    this.router.navigate(["/user-projects"])
  }

  bindUserToProject(userId: number, projectId: number) {
    this.userService.bindUserToProject(userId, projectId);
  }

HTML:

<div class="bindProject">
    <form #bindProject="ngForm" (ngSubmit)="bindUserToProject()">
      <h2 class="text-center text-primary">Bind User to Projects</h2>   

      <div class="input-group mt-1">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <i class="fas fa-dot-circle text-info"></i>&nbsp;Users
          </div>
        </div>
       <select name="userId" [(ngModel)]="users.userId" class="form-control" required>
         <option disabled>-Please choose User-</option>
         <option *ngFor="let item of users" [ngValue]="item.userId">
          {{ item.userName }}
         </option>
       </select>
      </div>

      <div class="input-group mt-1">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <i class="fas fa-dot-circle text-info"></i>&nbsp;Projects
          </div>
        </div>
       <select name="projectId" [(ngModel)]="projects.projectId" class="form-control" required>
         <option disabled>-Please choose Projects-</option>
         <option *ngFor="let item of projects" [ngValue]="item.projectId">
          {{ item.projectName }}
         </option>
       </select>
      </div>

      <div class="form-group mt-1">
        <button [disabled]="!bindProject.valid" class="btn btn-success btn-sm mr-5" type="submit"><i 
      class="fas fa-plus"></i>&nbsp;Add</button>
        <button (click)="goBackToUserProjects()" class="btn btn-sm btn-outline-success"><i 
      class="fas fa-tasks"></i>&nbsp;Go back to user projects</button>  
      </div>

    </form>

  </div>

问题是如何从两个下拉列表中获取选定的 ID 并将其传递给我的 bindToProject() 方法。

Answer 1

您应该将选择值与一些变量绑定(bind)，例如 selectedProject 和 selectedUser。

app.component.ts :

selectedUser : number;
selectedProject : number;

bindUserToProject() {
    this.userService.bindUserToProject(this.selectedUser, this.selectedProject);
}

app.component.html :

<select name="userId" [(ngModel)]="selectedUser">
    <option disabled>-Please choose User-</option>
    <option *ngFor="let item of users" [ngValue]="item.userId">
        {{ item.userName }}
    </option>
</select>

<select name="projectId" [(ngModel)]="selectedProject">
    <option disabled>-Please choose Projects-</option>
    <option *ngFor="let item of projects" [ngValue]="item.projectId">
        {{ item.projectName }}
    </option>
</select>

演示:https://stackblitz.com/edit/angular-3udq1g