Question

我正在尝试从下拉列表中添加一个工作者到一个工作，我不明白如何在打字稿中写这个。我是Angular和Typescript的新手，所以这对你来说是基本的，但我想学习和谷歌对此不是很有帮助，或者我不知道如何搜索这个特定的问题。为了说清楚，我也将从web api添加模型。

作业：

cloneElement

工人：

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; }
}

因此，我将在这两个表之间生成一个表，以便存储分配给作业的所有Worker。当我添加一个新的Job时，我填充了一个DropDownlist，其中包含所有可用的worker，我想选择一个worker并使用其余的输入提交。

以下是Angular的模型：

工作：

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; }
}

工人：

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

  worker: Worker[];
}

招聘服务：

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

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

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

HTML组件下拉列表：

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

提交输入按钮和DropDownlist：

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

TypeScript添加方法：

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

我尝试了各种各样的东西来传递工作者对象，但至少这到达了我的API但却失败了ModelState，因为我没有收到任何工作者，因为首先绑定是错误的并且在控制台中我得到参数worker的“worker”而不是实际对象。

“错误错误：尝试区分”工人“时出错。只允许数组和可迭代”

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

Answer 1

进行以下更改：

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

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

1 个答案: