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-class应添加“ selectedItem”类，但不会发生。

Answer 1

将对象传递给ngClass时，键是您要添加的类。值是真实的或虚假的表达式，它们会添加或删除该类。

ngClass指令应使用camelCase编写，并用方括号括起来，方括号告诉Angular将该值作为模板表达式进行评估。

因此您的表情应如下所示：

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

在Angular 6中使用ChangeDetectionStrategy，需要在子元素上添加条件类（ng-class）

1 个答案: