поставить операцию на Angular5 - PullRequest
Новая
       10

поставить операцию на Angular5

0 голосов
/ 07 июня 2018

У меня есть таблица в БД с именем settings.На бэкэнде у меня есть 2 конечные точки: получить настройки и выставить настройки.

Теперь я пытаюсь создать окно для редактирования этой таблицы в Angular.

Я создал Angular Service для получения значений: 

findUserSettings(): Observable<UserSettings> {
const userServiceUrl = environment.backendUrl + '/users/settings';
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  })
};
return this.http.get<UserSettings>(userServiceUrl, httpOptions);
}
editUserSettings(userSettings: UserSettings): Observable<Object> {
const userUrl = environment.backendUrl + '/users/settings';
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  })
}
return this.http.put(userUrl, userSettings, httpOptions)

}

теперь в моем компоненте я пытаюсь получить данные из этих запросов такими способами: 

findUserSettings(){
this.userService.findUserSettings().subscribe(
  success => {
    this.formData = success;
  },
  error => {
    console.error(error);
  },
  () => {
  }
);
}

getFirstDayOfWeek(){
this.userService.findUserSettings().subscribe(
  success => {
    this.formData.firstDayOfWeek = success.firstDayOfWeek;
  },
  error => {
    console.error(error);
  },
  () => {
  }
);
}

saveUserSettings(){
this.userService.editUserSettings(this.formData).subscribe(
  data => {
    this.formDataSaved.emit(true);
  }
);
}

Я создал шаблон HTML с кнопкой для добавления,но я не знаю, как передать тело этого метода. 

    <select class="form-control" id="select">
        <option value="1">My enum here.</option>
      </select>
    <button class="btn btn-default" (click)="saveUserSettings()">Save</button>

Это момент, когда я упускаю суть и не знаю, как двигаться дальше.Мне нужно передать тело методу, но вряд ли не знаю как.

Тело, которое ему требуется, выглядит так: 

import { User } from "./user";

export class UserSettings {
  id: number;
  User: User;
  firstDayOfWeek: Day;
}

День - перечисление, как показано ниже: 

enum Day {
    SUNDAY = 'su',
    MONDAY = 'mo',
    TUESDAY = 'tu',
    WEDNESDAY = 'we',
    THURSDAY = 'th',
    FRIDAY = 'fr', 
    SATURDAY = 'sa', 
}

Я бы хотел, чтобы пользователь выбрал firstDayOfWeek только здесь, а затем нажмите кнопку, чтобы выполнить операцию ввода.Есть идеи, что мне теперь делать?

Как передать body в метод из html и как добавить перечисление String в select, чтобы можно было изменить эту запись в БД?

1 Ответ

0 голосов
/ 07 июня 2018

РЕДАКТИРОВАТЬ

В вашем файле TS

Импортируйте ваше перечисление.Создайте локальную копию вашего перечисления.Извлеките ключи. 

import { Day } from '../enums/enums';

keys: any[];
days = Day; // local instance of your enum

constructor() {
   this.keys = Object.keys(this.days);
}

В вашем HTML-шаблоне

Свяжите свой select-box с полем firstDayOfWeek в userSettings.Создайте список опций дней. 

<select class="form-control" id="select" [(ngModel)]="userSettings.firstDayOfWeek">
   <option *ngFor="let key of keys" [value]="days[key]">{{key}}</option>
</select>

Если вы сейчас щелкните опцию, поле firstDayOfWeek в userSettings будет напрямую обновлено с соответствующим значением перечисления, например, mo, su искоро.Затем вы можете напрямую сохранить его.

Не забывайте, что вам нужен доступ к вашему перечислению Дня.Самый простой способ - поместить его в конец файла TS.

...