Angular / Typescript更改数字数组的值

Question

我得到了Object essensplan

  const essensplan = [
 { id: 1, essenProWoche: [11, 14, 17, 20, 12] },
 ...
 { id: 8, essenProWoche: [15, 14, 13, 12, 11] }
  ];

从模拟服务器，我希望用户可以更改数组essenProWoche的每个值，并将其返回给服务器。

我试过了

    <div>
     <label>Änderungen:
        <input [(ngModel)]="essensplan.essenProWoche"     placeholder="Name">
     </label>
    </div>

这不起作用，因为它不作为数组返回

和

 <label *ngFor="let id of essensplan.essenProWoche; let i = index">
    <input type="number"  [(ngModel)]="essensplan.essenProWoche[i]">
  </label>

它会在浏览器中更改实时值，但不会保存它们。

我通过以下功能保存输入：

essensplan-detail.component.ts

save(): void {
this.essensplanService.updateEssensplan(this.essensplan)
  .subscribe(() => this.goBack());
  }

essensplan.service.ts

 updateEssensplan(essensplan: Essensplan): Observable<any> {
 return this.http.put(this.speisekarteUrl, essensplan, httpOptions).pipe(
 tap(_ => this.log(`updated essensplan id=${essensplan.id}`)),
 catchError(this.handleError<any>('updateEssensplan'))

Answer 1

另一种方法，您可以将数组元素作为字符串。从服务器获取几个对象的数组时：

this.essensplan = [
    { id: 1, essenProWoche: [11, 14, 17, 20, 12] },
    { id: 2, essenProWoche: [11, 14, 17, 20, 12] }
];

然后你可以改为：

this.essensplan.map(item => {
    item.essenProWoche = item.essenProWoche.join(',');
});

你可以使用：

<ng-template ngFor let-item [ngForOf]="essensplan">
    <input type="text" [(ngModel)]="item.essenProWoche">
</ngtemplate>
<!-- but make sure to enter the values with commas -->

当你即将保存它时：

save(): void {
    this.essensplan.map(item => {
        item.essenProWoche = item.essenProWoche.split(',');    // because it was a string
    });
    this.essensplanService.updateEssensplan(this.essensplan)
    .subscribe(() => this.goBack());
}

Answer 2

您是否尝试在更改每个值时自动调用保存功能？如果是，那么使用formControl并订阅valueChanges事件。你可以在每次价值变化时调用你的save函数。

Answer 3

你想要双向绑定功能吗？

如果你更改模型内的值而不是自动更新你的json。

在你的HTML中：

<div *ngFor="let items of essensplan">
    <div *ngFor="let opt of items.essenProWoche; index as i; trackBy: trackByFn">       
        <input type="number" [(ngModel)]="items.essenProWoche[i]">
    </div>
</div>

在你的Ts：

trackByFn(index, item) {
   return index;
}

对于现场演示，请查看此Stackblitz