我刚开始使用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;
}
}