Question

我得到了对象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>

在您的电话中：

trackByFn(index, item) {
   return index;
}

对于实时演示，请检查此Stackblitz

Angular / Typescript更改数字数组的值

3 个答案: