Angular / Typescript Изменение значений массива чисел - PullRequest
Новая
       10

Angular / Typescript Изменение значений массива чисел

0 голосов
/ 13 сентября 2018

Я получаю объект 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'))

Ответы [ 3 ]

0 голосов
/ 13 сентября 2018

Другой способ, вы можете сделать элементы массива в виде строки. Когда вы получаете массив из нескольких объектов с сервера: 

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());
}
0 голосов
/ 13 сентября 2018

Хотите функциональность двусторонней привязки?

Если вы измените значение внутри модели, то также автоматически обновите свой 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

0 голосов
/ 13 сентября 2018

Вы пытаетесь вызвать функцию сохранения автоматически при изменении каждого значения? Если да, то используйте formControl и подпишитесь на событие valueChanges. Вы можете вызывать функцию save каждый раз, когда значение изменяется.

...