来自下拉列表的 Angular 5 发布对象

Question

我正在尝试从下拉列表中将工作人员添加到工作中，但我不明白如何在打字稿中编写此内容。我对 Angular 和 Typescript 很陌生，所以这对你来说可能是基本的，但我想学习，谷歌在这方面没有太大帮助，或者我不知道如何搜索这个特定问题。 为了清楚起见，我也会从 web 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; }
}

因此将在这两个表之间生成一个表，我想在其中存储分配给作业的所有工人。 当我添加一个新工作时，我已经用所有可用的工作人员填充了一个下拉列表，我想选择一个工作人员并提交其余的输入。

以下是来自 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);
}

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

1. 我不确定如何正确绑定 DropDownlist 以发布数据。
2. 我不知道如何将我从 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”而不是实际对象。

“ERROR 错误：尝试区分“worker”时出错。只允许使用数组和可迭代对象”

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

Answer 1

进行这些更改：

• 将变量 worker: Worker 添加到您的 TS

• 在<select> 上，将[(ngModel)]="workers" 更改为[(ngModel)]="worker"。

• 在<option> 上，将value 更改为[value]。 [] 是Property Binding，如果你没有[] 环绕值，你传入value 的实际上是字符串worker。
• 您的函数现在采用 worker 而不是 workers。