Угловые 2 - привязанные флажки, созданные ngFor для логического массива

Question

Я динамически создаю выпадающий список элементов, используя ngFor, обводя строковый массив (полученный из SQL-запроса), сохраненный в службе.

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)"> 
    <a> 
    <input type="checkbox" id="vehCB_{{i}}"/>{{vehicleClasses}} 
    </a> 
</li> 

Выпадающее меню имеет флажок, а затем имя выбора ({{VehicleClasses}}. Как хранить которые Флажки пользователь проверил (и предпочтительно в рамках услуги, а не компонент)?
В идеале , Я хочу иметь логический массив, который сохраняет значение флажка. Если это возможно, могу ли я привязать этот флажок к значению, так что, если, например, функция должна была изменить все флажки с буферами, флажки будут обновляться?

Я видел ngModel, используемый в других подобных сценариях - но я не смог успешно заставить его работать.

Answer 1

Прошу прощения за отправку ответа так быстро после размещения вопроса. Я мог бы удалить вопрос, если он предпочел, но если кто-то другой столкнется с подобной проблемой.

Я не знал, что могу использовать ngModel для непосредственного связывания с булевым массивом из службы. Используя индексное обозначение ngFor, я мог бы легко связать каждый флажок к элементу в пределах булева массива:

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)"> 
    <a> 
    <input type="checkbox" id="vehCB_{{i}}" [(ngModel)]="toolbarService.vehicleClassCheckboxes[i]"/>{{vehicleClasses}} 
    </a> 
</li> 

Функция, которые я написал в службе, которая непосредственно изменить булев массив заставил флажки правильно обновить. Если у кого-то еще есть лучший способ сделать это, я бы с удовольствием узнал, хотя это и хорошо соответствовало моему сценарию.

Answer 2

Во-первых, старайтесь избегать использования методов в переплетах

*ngFor="let vehicleClasses of getVehicleClassList(); 

Каждый раз при запуске обнаружения изменения такие методы называются и изменения обнаружения работает очень часто. Вместо этого присвойте результат свойству и привяжите его к этому свойству.

<li *ngFor="let vehicleClass of getVehicleClasses; let i = index" (click)="cbStatus[i] = !cbStatus[i]"> 
    <a> 
    <input type="checkbox" [(ngModel)]="cbStatus[i]" />{{vehicleClass}} 
    </a> 
</li> 

class MyComponent { 
    @Input() set vehicleClasses(value) { 
    this.vehicles = value; 
    this.cbStatus = []; 
    for(var p in this.vehicles) { 
     this.vehicles.push(false); 
    } 
    } 
}