Question

我刚开始使用Angular 2和打字稿，面临一些小问题。我正在使用ngClass在值为true或false的情况下应用动态类。但不知怎的，它并没有在条件得到重视的情况下应用这个类。

<td *ngFor="let data of tableData.timesheetInputs.timesheetDays | dayfilterpipe:'DAY' ">
                <input [(ngModel)] ="data.amount" #day="ngModel" (keypress)="_keyPress($event)" (ngModelChange)="timesheetHourChanged(data.amount,'DAY',data.day)" [disabled]="inputViewState && !isEditable" [ngClass]="{'is-invalidTimeEntry': (data.amount === '') || ((data.amount)%(0.25) != 0)  || (data.amount > 24),'changed-hour': hourChanged}" />

            </td>

我正在评估＆＃34; hourChanged＆＃34;相应的组件类中的标志和值正确。但它没有在视图部分工作。

[ngClass]="{'is-invalidTimeEntry': (data.amount === '') || ((data.amount)%(0.25) != 0)  || (data.amount > 24),'changed-hour': hourChanged}"

我正确地写了这个表达式还是有些问题。

编辑：添加组件代码

@Component({
selector: 'timesheet-table',
templateUrl: './temp.component.html',
styleUrls: ['./temp.component.css','../../../node_modules/angular2-    busy/build/style/busy.css']
})

export class TempComponent implements OnInit,OnChanges {
@Input()
tableData: Timesheet ; 
@Input()
inputViewState:boolean;
@Input()
isEditable:boolean;
@Output() onHourChange = new EventEmitter<boolean>();
private hourChanged:boolean;

constructor(private router: Router,
          private route: ActivatedRoute,
          private translate: TranslateService) {
}
ngOnInit() {
  this.tableDataCopy = this.deepCopy(this.tableData);   
}

public hourEntryChanged(day:any,type:string):boolean{
let tLen = this.tableData.timesheetInputs.timesheetDays.length;
let tCopyLen = this.tableDataCopy.timesheetInputs.timesheetDays.length;

let tDays = this.tableData.timesheetInputs.timesheetDays;
let tCopyDays = this.tableDataCopy.timesheetInputs.timesheetDays;
for(let ind=0; ind<tLen ; ind++){
    if(tDays[ind].day === day && tDays[ind].type === type && tCopyDays[ind].day === day && tCopyDays[ind].type === type){
        if(tDays[ind].amount !== tCopyDays[ind].amount){
            this.onHourChange.emit(true);
            this.hourChanged = true;
        }
    }else{
       this.onHourChange.emit(false);
       this.hourChanged = false;
    }

}
  console.log(this.hourChanged);
return this.hourChanged;
}



}

ngClass没有在真实表达式上应用类？

0 个答案: