0

我有来自 json 服务器的数据，它完全按照我想要和期望的方式显示，但是在保存更改时，它不会以与它进来的格式相同的格式保存。

这是我的表格：

<form (ngSubmit)="saveProfile(form.value, form.valid)" #form="ngForm" novalidate>
  ...
  <input 
    matInput 
    placeholder="Company Name" 
    type="text"
    name="companyName"
    required
    #companyName="ngModel"
    [ngModel]="profile?.companyName">

  <!-- Code in question below: -->
  <ul class="days-of-operation">
    <li *ngFor="let day of profile?.daysOfOperation">
      <mat-checkbox
        [name]="day.day"
        [ngModel]="day.open">
        {{day.day}}
      </mat-checkbox>
    </li>
  </ul>
  ...
  <button type="submit" [disabled]="form.invalid">
    Update Profile
  </button>
</form>

这是进来的工作JSON：

{
  "profile": {
  "companyName": "Example Company",
    "daysOfOperation": [
      {
        "day": "Sunday",
        "open": false
      }, {
        "day": "Monday",
        "open": true
      }, {
        "day": "Tuesday",
        "open": true
      }, {
        "day": "Wednesday",
        "open": true
      }, {
        "day": "Thursday",
        "open": true
      }, {
        "day": "Friday",
        "open": true
      }, {
        "day": "Saturday",
        "open": true
      }
    ],
    ...
  }
}

这是当我单击更新按钮时form.value发送到该方法的数据：saveProfile

{
  "companyName": "Example Name",
  "Sunday": false,
  "Monday": true,
  "Tuesday": true,
  "Wednesday": true,
  "Thursday": true,
  "Friday": true,
  "Saturday": false
}

如您所见，表单正在以完全不同的格式收集数据。这适用于companyName. 我可以将它更改为我想要的任何东西，保存它，它会以我保存它的方式返回，但日子不再在daysOfOperation对象内部传递。为什么表单发送的数据与传入的数据不同？如何让它以与进来时相同的格式保存？我究竟做错了什么？

如果这会让事情变得更好/更容易，我愿意改变我格式化操作日期的方式。

4

1 回答 1

1

form.value您可以简单地绑定到现有对象，而不是使用 ，然后使用this.profile：

ngModel像这样改变：

  <mat-checkbox
    [name]="day.day"
    [(ngModel)]="day.open">
    {{day.day}}
  </mat-checkbox>

在您的 中saveProfile，只需使用this.profile，如下所示：

saveProfile() {
  console.log(this.profile)
}

这是一个 StackBlitz 示例

于 2018-05-26T17:06:41.270 回答