Angular如何创建动态扩展复选框列表以及如何获取API的值？

ng generate component dynamic-checkbox-list

<div *ngFor="let option of options">
  <input type="checkbox" [value]="option.id" (change)="onCheckboxChange($event, option.id)">
  {{ option.name }}
</div>

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dynamic-checkbox-list',
  templateUrl: './dynamic-checkbox-list.component.html',
  styleUrls: ['./dynamic-checkbox-list.component.css']
})
export class DynamicCheckboxListComponent implements OnInit {
  options: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('https://api.example.com/options').subscribe((data: any[]) => {
      this.options = data;
    });
  }

  onCheckboxChange(event: any, id: number): void {
    console.log('Checkbox with id ' + id + ' changed to ' + event.target.checked);
    // 这里可以处理复选框状态变化的逻辑
  }
}

selectedOptions: number[] = [];

onCheckboxChange(event: any, id: number): void {
  if (event.target.checked) {
    this.selectedOptions.push(id);
  } else {
    const index = this.selectedOptions.indexOf(id);
    if (index > -1) {
      this.selectedOptions.splice(index, 1);
    }
  }
  console.log('Selected options:', this.selectedOptions);
}

this.http.get('https://api.example.com/options').subscribe(
  (data: any[]) => {
    this.options = data;
  },
  (error) => {
    console.error('Error fetching options:', error);
  }
);