将角材料选择列表值提交为PostBody

Question

我有一个基于mat-selection-list的选择列表，如下所示： https://stackblitz.com/edit/material-selection-list-5-0-0?file=app%2Fapp.component.ts 我想将我的选择提交为PostBody，我的后端端点希望postbody具有以下结构：

{
    "taskTypeAreas": [
        {
            "name": "Area1"
        },
        {
            "name": "Area2"
        },
        {
            "name": "Area3"
        }
    ]
}

在我的component.ts上，我像下面这样调用该服务：

  submitNames() {

        let Names  =  this.selectedOptions; // here i want to submit user selectons
        this.myservice.nameService(Names).subscribe(res => {
          console.log('Results' + JSON.stringify(res));
          }
        );
      }


  onNgModelChange(event){
    console.log('on ng model change', event);
    }

在模板中：

  <mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
      <mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
        {{tta.name}}
      </mat-list-option>
  </mat-selection-list>
  <div>
      <p Selection: {{ selectedOptions }}</p> 
      <button class="btn btn-default pull-right" (click)="submitNames()">Submit</button>
    </div>

单击“提交”时，返回的响应是HTTP状态代码400（错误请求），并且请求有效负载如下所示：[“ Area1”]，如何根据上述模式修改服务器要理解的PostBody？ >