Angular 根据接收的数据量选择角度渲染复选框

我有这样一个场景。我有一个系统，其中一个特定的用户可以有多个角色，如“管理员”、“用户”、“局外人”（数据库中不同角色的数量可以改变）。角色存储在数据库中，我的angular frontend发出http get请求以获取这些角色。我的问题是，当创建一个用户时，我必须为每个不同的角色显示一个复选框，以便用户可以为自己标记多个角色。当使用HTTPPOST方法提交表单时，后端应该能够识别用户为保存数据而检查的角色。所以总而言之,

根据数据库中角色表中的数据数量显示复选框

当用户标记它们时，将数据发布到要保存的后端

我通常使用

ngModel

获取表单数据。但在这里，我想不出使用它的方法，因为数据库中角色的数量可能会有所不同

---

如何实现这一点？

您可以使用

*ngFor

循环查看

角色

，并呈现为复选框列表

HTML

<div *ngFor="let role of roles">
  <input type="checkbox" [(ngModel)]="role.isSelected" (ngModelChange)="onRoleChange(role)">{{role.name}}
</div>

以下是我创建的stackblitz的一个示例：

---

还要检查控制台中的输出。

非常感谢！这是我一直在寻找的200%解决方案！！：-）当然很乐意帮忙。：）

onRoleChange(role) {
    // call your API to save here..
    console.log(role);
  }