在动态启动复​​选框中获取选中的值

Question

我有一系列问题，每个问题都有一个问题字段和一个选项字段，该字段本质上是一个字符串选项数组。 应用正在 Angular 中构建。

{

  question: "Is this the question?",
  options: ["yes", "no", "maybe", "not sure"]

}

问题是从服务动态接收的，并且可能会随着时间而变化。用户必须可以选择多个选项，因此我使用了一个复选框。具体来说就是 PrimeNG 的复选框。

<p-checkbox #checkbox class="checkbox-option" [label]="opt.val" [value]="opt.val" value="opt.val">
</p-checkbox>

问题是，应该使用哪种方法来一次接收一个问题的选中选项。复选框下面会有一个提交按钮，之后我需要检查选中的选项。

PS。我是新手，如果有人需要任何其他相关信息或代码，请通知我。提前致谢。

Answer 1

首先，在您的元素中使用 ngModel，然后您可以轻松地拉取选定的值。 这是一个带有循环的示例

<p-checkbox *ngFor="let opt of boxes" class="checkbox-option" 
  [label]="opt.val" 
  [value]="opt.val" 
  [(ngModel)]="selectedBoxes" >
    </p-checkbox>

<button (click)="getSelected()">Get answers</button>

在component.ts中

export class SomeComponent { 
    selectedBoxes: string[] = [];
    getSelected() {
          console.log(this.selectedBoxes)
        }