Angular / typescript изменение значений числового массива

Я получаю обзор объекта

  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'))

Как вы говорите: Я получаю обзор объекта, должно быть const essensplan ={ id: 1, essenProWoche: [11, 14, 17, 20, 12] };

Rohit Sharma 13.09.2018 19:19

Почему бы вам не использовать ввод как значения, разделенные запятыми?

CruelEngine 13.09.2018 19:19

@RohitSharma это так, есть еще следующие с id: 2, 3 и т. д.

anecsa 13.09.2018 19:24

@CruelEngine, как это работает?

anecsa 13.09.2018 19:24

@anecsa Rohit ответил на это здесь.

CruelEngine 13.09.2018 19:26
0
5
813
3

Ответы 3

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

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

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());
}

спасибо, похоже, это сработает, но каков импорт для .map ()?

anecsa 13.09.2018 19:42

Нет необходимости импортировать map, он доступен в Array.prototype по умолчанию.

Rohit Sharma 13.09.2018 19:44

this.essensplan.map хочет отобразить объект essensplan, а не массив EssenProWoche

anecsa 13.09.2018 19:49

Как вы можете видеть выше, this.essensplan = [ ]. Это тоже массив.

Rohit Sharma 13.09.2018 19:51

Вам нужна двусторонняя привязка?

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

спасибо, это работает в браузере! Единственная проблема в том, что он не сохраняется на сервере, вы знаете, как я могу это добавить?

anecsa 13.09.2018 21:57

консоль не выдает ошибок, я думаю, потому что json обновляется в браузере. Просто не сохраняется на сервере

anecsa 13.09.2018 22:08

Получили ли вы обновленный json внутри этого метода: updateEssensplan(essensplan: Essensplan): Observable<any> { в вашем сервисе?

Shashikant Devani 13.09.2018 22:11

Другие вопросы по теме