我正在构建一个应用程序,使人们可以预订某些课程。
我的组件中有一个数组:
public corsiSelezionati: {nome: string, sede:string, codice:string}[]
我有一个onChange()
函数,每次表单更改时都会触发该函数:
onChange($event) {
try {
const nome = ($event.target.options[$event.target.options.selectedIndex].text).split('-')[0].trim();
const sede = ($event.target.options[$event.target.options.selectedIndex].text).split('-')[1].trim();
const codice = $event.target.options[$event.target.options.selectedIndex].value;
const corso = {
nome: nome,
sede: sede,
codice: codice
};
const turno = $event.path[0].getAttribute('ng-reflect-name');
switch (turno) {
case 'g1t1':
this.corsiSelezionati[0] = corso;
this.corsiSelezionati[1] = {nome: '', sede: '', codice: ''};
this.corsiForm.controls['g1t2'].enable();
this.corsiForm.controls['g1t2'].reset();
break;
case 'g1t2':
this.corsiSelezionati[1] = corso;
break;
case 'g2t1':
this.corsiSelezionati[2] = corso;
this.corsiSelezionati[3] = {nome: '', sede: '', codice: ''};
this.corsiForm.controls['g2t2'].enable();
this.corsiForm.controls['g2t2'].reset();
break;
case 'g2t2':
this.corsiSelezionati[3] = corso;
break;
case 'g3t1':
this.corsiSelezionati[4] = corso;
this.corsiSelezionati[5] = {nome: '', sede: '', codice: ''};
this.corsiForm.controls['g3t2'].enable();
this.corsiForm.controls['g3t2'].reset();
break;
case 'g3t2':
this.corsiSelezionati[5] = corso;
break;
default:
break;
}
} catch (error) {
const nome = ($event.target.options[$event.target.options.selectedIndex].text)
const turno = $event.path[0].getAttribute('ng-reflect-name');
if(nome == "Assente"){
switch (turno) {
case 'g1t1':
this.corsiSelezionati[0] = {nome: 'assente', sede: 'assente', codice: 'assente'};
this.corsiSelezionati[1] = {nome: 'assente', sede: 'assente', codice: 'assente'};
try {
this.corsiForm.controls['g1t2'].disable();
} catch (error) {}
break;
case 'g1t2':
this.corsiSelezionati[0] = {nome: 'assente', sede: 'assente', codice: 'assente'};
this.corsiSelezionati[1] = {nome: 'assente', sede: 'assente', codice: 'assente'};
try {
this.corsiForm.controls['g1t2'].disable();
} catch (error){}
break;
case 'g2t1':
this.corsiSelezionati[2] = {nome: 'assente', sede: 'assente', codice: 'assente'};
this.corsiSelezionati[3] = {nome: 'assente', sede: 'assente', codice: 'assente'};
try{
this.corsiForm.controls['g2t2'].disable();
} catch(error){}
break;
case 'g2t2':
this.corsiSelezionati[2] = {nome: 'assente', sede: 'assente', codice: 'assente'};
this.corsiSelezionati[3] = {nome: 'assente', sede: 'assente', codice: 'assente'};
try{
this.corsiForm.controls['g2t2'].disable();
} catch(error){}
break;
case 'g3t1':
this.corsiSelezionati[4] = {nome: 'assente', sede: 'assente', codice: 'assente'};
this.corsiSelezionati[5] = {nome: 'assente', sede: 'assente', codice: 'assente'};
try{
this.corsiForm.controls['g3t2'].disable();
} catch(error){}
break;
case 'g3t2':
this.corsiSelezionati[4] = {nome: 'assente', sede: 'assente', codice: 'assente'};
this.corsiSelezionati[5] = {nome: 'assente', sede: 'assente', codice: 'assente'};
try{
this.corsiForm.controls['g3t2'].disable();
} catch(error){}
break;
default:
break;
}
}
}
console.log(this.corsiSelezionati,this.corsiForm);
}
,并且表单中的每个选择都有更多选项,这些选项可以通过功能canISub()
canISub(corsiForm: NgForm , row: any[], cell: Corso[], corso: Corso) {
if (this.corsiSelezionati[0].codice === corso.codice) {return true; }
if (this.corsiSelezionati[1].codice === corso.codice) {return true; }
if (this.corsiSelezionati[2].codice === corso.codice) {return true; }
if (this.corsiSelezionati[3].codice === corso.codice) {return true; }
if (this.corsiSelezionati[4].codice === corso.codice) {return true; }
if (this.corsiSelezionati[5].codice === corso.codice) {return true; }
if(this.table.dataRows.indexOf(row)===1 && this.sediObbligatorie[row.indexOf(cell)] == "") {
if(corso.sede !== this.corsiSelezionati[row.indexOf(cell) *2 ].sede){
return true;
}
}
if(this.sediObbligatorie[row.indexOf(cell)] != "" && corso.sede != this.sediObbligatorie[row.indexOf(cell)]) {
return true;
}
}
在HTML中选择的是这个
<select class="form-control border-input" [name]="names[((row.indexOf(cell))*2)+(table.dataRows.indexOf(row))]" ngModel (change)="onChange($event)" *ngIf="this.ragazzo.turni.indexOf(names[((row.indexOf(cell))*2)+(table.dataRows.indexOf(row))])>=0" required>
<option value="assente" *ngIf="table.dataRows.indexOf(row)== 0" [disabled]="absCanI(row,cell)">Assente</option>
<option *ngFor="let corso of cell" [value]="corso.codice" [disabled]="canISub(corsiForm,row,cell,corso)">{{corso.nome}} - {{corso.sede}}</option>
</select>
问题在于,在生产模式下,第二个指令块始终返回true。在开发模式下,它可以完美运行。
if(this.table.dataRows.indexOf(row)===1 && this.sediObbligatorie[row.indexOf(cell)] == ""){
if(corso.sede !== this.corsiSelezionati[row.indexOf(cell) *2 ].sede){
return true;
}
}
谢谢。