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

Question

在我的项目中，我使用的是 Angular 8。创建了根据用户的 id 将用户绑定到项目的方法，并使用邮递员后端功能进行了测试，可以正常工作。

我对 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

您应该将选择值与一些变量绑定，例如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

Answer 2

在您的组件中定义一个名为selectedUserId类的变量，将[(ngModel)]="users.userId"更改为[(ngModel)]="selectedUserId" 。 然后在bindUserToProject()您可以直接从组件访问该值。

您可以对项目下拉列表执行相同操作。

Answer 3

像这样尝试

<form #bindProject="ngForm" (ngSubmit)="bindUserToProject(bindProject.value)">

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

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

  <button  type="submit">
    Add
  </button>

</form>

成分

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

bindUserToProject将获得孔形式值，但此{userId, projectId}是 ES2015 称为破坏的功能

演示🚀

Answer 4

如果有人遇到同样的问题，我的服务也出错了，这引发了异常 json Parser。 我把这个改成了，效果很好：

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

Answer 5

这些是解决方案的以下步骤-：

1. 为 userId 和 projectId 初始化两个变量。

2. 在 ngModel 中应用这些变量，如[(ngModel)]="UserId"和[(ngModel)]="projectId"

3. 使用(ngSubmit)="bindUserToProject()"
4. 在组件文件中使用bindUserToProject()函数中的初始化变量。
5. 选择下拉列表并单击提交。
6. 现在，您的变量中有一个选定的值。