将操作放在Angular5上
将操作放在Angular5上
提问于 2018-06-07 21:07:02
我在DB中有一个名为settings的表。在后端，我有两个端点:获取设置和放置设置。
现在，我尝试创建一个窗口来在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，然后按下按钮进行此put操作。你知道我现在该怎么做吗？
如何将body从html传递到方法，以及如何将字符串枚举添加到select以能够更改此db记录？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 21:39:18
编辑
在您的TS文件中
导入您的枚举。创建枚举的本地副本。提取密钥。
import { Day } from '../enums/enums';
keys: any[];
days = Day; // local instance of your enum
constructor() {
this.keys = Object.keys(this.days);
}在您的HTML-template中
将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等。然后你可以直接持久化它。
别忘了你需要访问你的enum Day。最简单的方法是将它放在TS文件的末尾。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50742057
复制相关文章
相似问题