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

Question

我希望在列表的每个文本中附加一个复选框。
如下所示：

1. 文本1[Checkbox1]
2. 文本2[Checkbox2]
3. text3[Checkbox3]
4. 文本4[Checkbox4]

<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>

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

出去的路是什么？

Answer 1

我在相应的.ts文件中定义了一个数组，如下所示:
复选框:checkboxstructure[]=[]

CheckBoxStructure定义如下：

export interface CheckboxStructure
{
  id:     number
  value:  boolean
}

我在*ngfor中编写了let I=index，并将我的checkboxs数组的特定字段附加到[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>

信用:*ng，了解如何使用索引将数组中的每个项绑定到ngModel