从angular页面,使用的是primeng组件库,获取复选框的值并使用java存入数据库
时间: 2024-03-10 18:49:42 浏览: 95
要从Angular页面中获取Primeng复选框的值并将其存储到Java数据库中,您需要遵循以下步骤:
1. 在您的Angular组件中,添加一个`FormGroup`对象以维护复选框的值。例如:
```
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
form: FormGroup;
checkboxes = [
{ label: 'Checkbox 1', value: 'checkbox1' },
{ label: 'Checkbox 2', value: 'checkbox2' },
{ label: 'Checkbox 3', value: 'checkbox3' }
];
constructor() { }
ngOnInit() {
this.form = new FormGroup({
checkboxes: new FormControl()
});
}
onSubmit() {
console.log(this.form.value.checkboxes); // displays the selected checkboxes
}
}
```
2. 在您的HTML模板中,使用Primeng的`p-checkbox`指令创建复选框,并将其绑定到上面定义的`FormGroup`对象中。例如:
```
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let checkbox of checkboxes">
<p-checkbox
[label]="checkbox.label"
[value]="checkbox.value"
formControlName="checkboxes"
></p-checkbox>
</div>
<button type="submit">Submit</button>
</form>
```
3. 在您的Angular服务中,使用Angular的`HttpClient`对象将复选框值发送到后端Java API。例如:
```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class MyService {
constructor(private http: HttpClient) {}
saveCheckboxes(checkboxes: string[]) {
const url = 'http://my-java-api.com/save-checkboxes';
return this.http.post(url, checkboxes);
}
}
```
4. 在您的Java控制器中,接收来自前端Angular的POST请求,并将复选框值存储到数据库中。例如:
```
@RestController
public class MyController {
@Autowired
private MyRepository myRepository;
@PostMapping("/save-checkboxes")
public void saveCheckboxes(@RequestBody List<String> checkboxes) {
MyEntity entity = new MyEntity();
entity.setCheckboxes(checkboxes);
myRepository.save(entity);
}
}
@Entity
public class MyEntity {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@ElementCollection
private List<String> checkboxes;
// getters and setters
}
```
这样,您就可以从Angular页面中获取Primeng复选框的值,并将其存储到Java数据库中了。
阅读全文