以角度获取动态嵌套复选框的值

Question

我在 Angular 中创建了动态嵌套复选框，如果选中，我想获取复选框的值。我在 Angular 中创建了一个演示项目，并面临 json 结构中的问题以实现功能。

sourcecode

Answer 1

可能有更有效的解决方案，但我会使用连接到您的 html 的嵌套对象创建一个对象。

例如：

countriesSport: CountrySports[] | undefined;

country: { id: 1, name: England, active: false, sports: [{ id: 1, name: soccer, active: false, selection: ENUM girl|boy|all}]}

您可以将这些值保存在 .ts 文件中的变量中。在您的 html 中，您可以映射这些值，例如：

<ul>
<li *ngFor="let country of countries>
         <input 
         type="checkbox"
        name="checkbox"
        [checked]="country.active"
        (change)="functionToDoExtraTHingsLikeToggleSubItems()"
    />
<ul>
    <li *ngFor="let sport of country.sports>
             <input 
         type="checkbox"
    name="checkbox"
    [checked]="sport.active"
    (change)="functionToChangeSportsStuff()"
    />
    </li>
</ul>
</li>

您希望输入字段的结构和样式以及可以选择或不选择哪些输入字段，取决于您的需求。带有girls|boys|all 的选择ENUM 也可以是具有活动状态的对象数组。

当您初始化和销毁​​您的组件时，您可以保存或将您的对象映射到其他值。