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

Question

我希望列表中的每个文本都附加一个复选框。像这样：文本1 [复选框1]文本2 [复选框2]文本3 [复选框3]文本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

{

  id:     number

  value:  boolean

}

我写入let i = index并*ngFor附加了checkboxes数组的特定字段，[ngModel]如下所示：[ngModel] = "checkboxes[i].value"

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

    <ul>

    <li *ngFor = "let blog of blogs; let i = index;" >

        <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]   = "checkboxes[i].value">

        </a>

    </li>

    </ul>

</div>