Angular 5 post 个来自下拉列表的对象

Question

我正在尝试从下拉列表中将工作人员添加到工作中，但我不明白如何在打字稿中写这个。我是 Angular 和 Typescript 的新手，所以这对您来说可能是基础知识，但我想学习并且 google 对此不是很有帮助，或者我不知道如何搜索这个特定问题。为了清楚起见，我也会从网络 api 添加模型。

工作：

public class Job
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public DateTime DueDate { get; set; }
    public bool IsCompleted { get; set; }

    public virtual ICollection<Worker> Worker { get; set; }
}

工人：

public class Worker
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public virtual ICollection<Job> Job { get; set; }
}

所以在这两个table之间会生成一个table，我想在其中存储分配给一个Job的所有Worker。当我添加一个新工作时，我已经填充了一个包含所有可用工作人员的 DropDownlist，我想 select 一个工作人员并提交其余输入。

以下是来自 Angular 的模型：

职位：

export class Jobs {
  Id: number;
  Name: string;
  Description: string;
  DueDate: Date;
  IsCompleted?: boolean;

  worker: Worker[];
}

工人：

export class Worker {
  Id: number;
  FirstName: string;
  LastName: string;
}

工作服务：

addJob(jobs: Jobs): Observable<Jobs> {
    return this.http.post<Jobs>(this.apiURL, jobs, httpOptions);
}

好的，到目前为止我很确定一切正常，从现在开始有 2 个重要问题：

我不确定如何正确绑定用于发布数据的 DropDownlist。
我不知道如何将从 DropDownlist 获取的对象传递到 TypeScript 组件并将其发送到服务。

HTML 组件下拉列表：

<div class="row">
  <div class="col-md-12">
        <label class="labelInputs">Select Worker</label><br>
        <select [(ngModel)]="workers" class="form-control">
          <option value="0">Select Worker</option>
          <option *ngFor="let worker of workers" value="worker">{{worker.FirstName}} {{worker.LastName}}</option>
      </select>
  </div>

输入和下拉列表的提交按钮：

  <button class="brn btn-lg btn-block btn-change" (click)="add(name.value, desc.value, workers)">Add Job</button>

TypeScript 添加方法：

jobs: Jobs[];
workers: Worker[];

ngOnInit() {
    this.getJobs();
    this.getWorkers();
}

add(Name: string, Description: string, worker: object): void {
    this.jobsServices.addJob({Name, Description, worker } as Jobs)
        .subscribe(jobs => {
            this.jobs.push(jobs);
        });
}

我尝试了各种方法来传递 worker 对象，但至少这到达了我的 API 但是 ModelState 失败了，因为我没有收到任何 worker，因为首先绑定是错误的，在控制台中我得到 "worker" 对于参数 worker 不是实际对象。

"错误错误：尝试 diff 'worker' 时出错。只允许数组和可迭代对象"

感谢任何帮助、教程、链接、解释或此处修改的内容。

Answer 1

进行这些更改：

添加变量 worker: Worker 到您的 TS
在 <select> 上，将 [(ngModel)]="workers" 更改为 [(ngModel)]="worker"。
在 <option> 上，将 value 更改为 [value]。 []是属性绑定，如果你没有[]左右值，你在value中传入的实际上是字符串worker。
您的函数现在接受 worker 而不是 workers。

Angular 5 post 个来自下拉列表的对象

Angular 5 post object from dropdownlist

typescript

asp.net-web-api2

angular