Используя ChangeDetectionStrategy в Angular 6, необходимо добавить условный класс для дочернего элемента (ng-class)

Question

У меня есть родительский компонент

export class ItemsComponent implements OnInit {
    itemList: any;
    constructor(private itemService:ItemService) {}
    ngOnInit() {
         this.itemService.getJsonData()
        .subscribe(response => {             
            this.itemList = response;           
         }, (error) => {
            console.log(error);
         });
    }
    selectCheckItemParent(event): void{
        for(var counter=0; counter<this.itemList.length;counter++){
            if(this.itemList[counter].itemId==event.target.dataset.cid){
                this.itemList[counter].isSelected   =   event.target.checked;
            }
        }
    }
} 

И дочерний компонент

export class ListViewComponent implements OnInit {  
    @Input() itemList : Item[];
    @Output() selectCheckItemParent = new EventEmitter<string,string>();
    constructor(private cdr: ChangeDetectorRef) {}
    get runChangeDetection() {
        console.log('ListView - Checking the view');
        return true;
    }
    selectCheckThisItem(event, itemSelected){
        this.selectCheckItemParent.emit(event);
    }
}

С HTML

<li *ngFor="let item of itemList;" >
    <input attr.data-cid="{{item.cid}}" (change)="selectCheckThisItem($event, item)" type="checkbox"  class="checkbox-custom"  #isSelected  ng-class="{ item.isSelected == true : 'checked'}" /> 
    <span class="row items-div" ng-class="{ item.isSelected==true : 'selectedItem' }">
        {{item.isSelected}}
    </span>
</li>

Теперь этот диапазон внутри тега li показывает true/ false, если обнаружено какое-либо изменение, но когда isSelected - true, класс ng должен добавить класс selectedItem, чего не происходит.

Answer 1

При передаче объекта в ngClass, ключи - это классы, которые вы хотите добавить. значения являются выражениями «истина» или «ложь», которые добавляют или удаляют этот класс.

Директива ngClass должна быть записана в camelCase и заключена в квадратные скобки, которые сообщают Angular вычислятьзначение в качестве выражения шаблона.

Таким образом, ваше выражение должно выглядеть следующим образом:

<span [ngClass]="{ selectedItem: item.isSelected }">