angular 实时显示选中复选框

可以使用 [(ngModel)] 指令来实现实时显示选中复选框的状态，例如：

<input type="checkbox" [(ngModel)]="isChecked">

其中，isChecked 是一个 boolean 类型的变量，用来保存复选框的状态。当复选框被选中时，isChecked 的值为 true，否则为 false。通过 [(ngModel)] 指令，可以将 isChecked 和复选框的状态进行双向绑定，实现实时显示选中复选框的状态。

相关问题

angular监听选择框选中的值的数据变化

在Angular中，可以使用`ngModel`指令和`(ngModelChange)`事件来监听选择框选中的值的数据变化。`ngModel`指令可以将选择框的值与组件中的一个属性双向绑定，`(ngModelChange)`事件可以在选择框的值发生变化时触发。

例如，假设我们有一个名为`mySelect`的选择框，我们可以这样监听它的变化：

<select [(ngModel)]="selectedValue" (ngModelChange)="onSelectChange()">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

在上面的代码中，我们使用了`[(ngModel)]`来将选择框的值与`selectedValue`属性双向绑定，使用`(ngModelChange)`来在选择框的值发生变化时触发`onSelectChange()`方法。

然后我们需要在组件中实现`onSelectChange()`方法来处理选择框的变化：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <select [(ngModel)]="selectedValue" (ngModelChange)="onSelectChange()">
      <option value="value1">Value 1</option>
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
    </select>
    <p>Selected value is {{selectedValue}}</p>
  `
})
export class MyComponent {
  selectedValue: string = 'value1';

  onSelectChange() {
    console.log('Selected value has changed:', this.selectedValue);
  }
}

在上面的代码中，我们实现了`onSelectChange()`方法来处理选择框的变化，打印出新的值。同时，在模板中使用`{{selectedValue}}`来展示当前选中的值。

从angular页面，使用的是primeng组件库，获取复选框的值并使用java存入数据库

要从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数据库中了。