如何在 Angular 中使用 ngModel 将复选框附加到列表的每个项目？

Question

我希望列表中的每个文本都附加一个复选框。
像这样：

1. 文本1 [复选框1]

2. 文本2 [复选框2]

3. 文本3 [复选框3]

4. 文本4 [复选框4]

该列表是动态的，因此复选框也应该动态显示在列表的每个项目旁边。

我应该能够在开始时设置每个复选框的默认值，并在用户单击它们时收集它们的值。

我已经尝试过这个：

<div *ngIf = "blogs.length > 0">

    <ul>

    <li *ngFor = "let blog of blogs" 

        (click)          = "onSelect(blog)" 

        [class.selected] = "blog === clickedOnThisBlog">

        <a *ngIf = "blog.show === true" routerLink = "/editor/{{blog.id}}">

            {{blog.title}} 

            creationDate: {{blog.creationDate}}

            modificationDate: {{blog.modificationDate}}

        </a>

        <a *ngIf = "blog.show === true">

            <input type     = "checkbox" 

            [ngModel]       = "checkboxChecked"

            #checkbox_l     = "ngModel"

            value           = "blog"

            (click)         = "onCheckboxClicked( checkbox_l, value )"  >

        </a>

    </li>

    </ul>

</div>

此代码的前半部分显示文本列表。在后半部分，我尝试将复选框附加到每个文本上。

我不知道如何将复选框列表链接回文件.ts，以便我可以在其中的一处控制它们。

这是模板驱动的代码。必须使用ngModel。

出路何在？

Answer 1

我在对应的.ts文件中定义了一个数组，如下：checkboxes: CheckboxStructure[] = []CheckboxStructure定义如下：export interface CheckboxStructure{&nbsp; id:&nbsp; &nbsp; &nbsp;number&nbsp; value:&nbsp; boolean}我写入let i = index并*ngFor附加了checkboxes数组的特定字段，[ngModel]如下所示：[ngModel] = "checkboxes[i].value"<div *ngIf = "blogs.length > 0">&nbsp; &nbsp; <ul>&nbsp; &nbsp; <li *ngFor = "let blog of blogs; let i = index;" >&nbsp; &nbsp; &nbsp; &nbsp; <a *ngIf = "blog.show === true" routerLink = "/editor/{{blog.id}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{blog.title}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; creationDate: {{blog.creationDate}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; modificationDate: {{blog.modificationDate}}&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a *ngIf = "blog.show === true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type = "checkbox"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [ngModel]&nbsp; &nbsp;= "checkboxes[i].value">&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></div>