在 Angular 5 中进行操作

Question

我在 DB 中有一个名为 settings 的表。 在后端，我有 2 个端点：获取设置和放置设置。

现在我尝试创建窗口以在 Angular 中编辑此表。

我创建了 Angular 服务来获取值：

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 以便能够更改此 db 记录？

Answer 1

编辑

在您的 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 绑定到userSettings 中的firstDayOfWeek 字段。建立天数选项列表。

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

如果您现在单击一个选项，userSettings 中的 firstDayOfWeek 字段将直接更新为相应的枚举值，例如mo、su 等等。然后就可以直接持久化了。

不要忘记您需要访问您的枚举 Day。最简单的方法是将其放在 TS 文件的末尾。