Как прикрепить флажок к каждому элементу списка с помощью ngModel в Angular?

Question

Я хочу установить флажок для каждого текста в моем списке.
Например:

1. Text1 [Checkbox1]
2. Text2 [Checkbox2]
3. Text3 [Checkbox3]
4. Text4 [Checkbox4]

Список является динамическим c, поэтому флажки также должны динамически появляться рядом с каждым элементом список.

Я должен иметь возможность установить значение по умолчанию для каждого флажка в начале, а также собрать их значения, когда пользователь нажимает на них.

Я пробовал это:

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

Кредит: * ngДля того, как связать каждый элемент в массиве с помощью ngModel, используя индекс