Question

我在DB中有一个名为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，然后按下按钮进行此放置操作。知道我现在该怎么办？

如何从html将body传递给方法，以及如何将String枚举添加到select以便能够更改此db记录？

Answer 1

修改

在 TS-File
中
导入你的枚举。创建枚举的本地副本。提取密钥。

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文件的末尾。

把操作放在Angular5上

1 个答案: