Cuando hago una selección desplegable, mi objeto ng-model se vuelve nulo, no estoy seguro de por qué.
Debido a que devuelve nulo, obtengo el siguiente error:
TypeError: Cannot read properties of null (reading 'name')Mi código
<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions()" ng-model="$ctrl.secondColumnOption"></select> <select ng-options="option.name for option in $ctrl.getAvailableColumnOptions()" ng-model="$ctrl.thirdColumnOption"> </select> getAvailableColumnOptions(){ return this.allAvailableColumnOptions.filter(x => x.name !== this.secondColumnOption.name && x.name !== this.thirdColumnOption.name && x.name !== this.fourthColumnOption.name); }Esto se debe a que, después de la selección, se getAvailableColumnOptions() . Y ahí está filtrando la fuente de datos para excluir las opciones seleccionadas. Entonces, ahora el menú desplegable no tiene un modelo apropiado en la fuente de datos y se borrará ng-model .
UPD:
<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions('secondColumnOption')" ng-model="$ctrl.secondColumnOption"></select> <select ng-options="option.name for option in $ctrl.getAvailableColumnOptions('thirdColumnOption')" ng-model="$ctrl.thirdColumnOption"> </select> getAvailableColumnOptions(ignoreOption) { return this.allAvailableColumnOptions .filter(x => (ignoreOption === 'secondColumnOption' || x.name !== this.secondColumnOption.name) && (ignoreOption === 'thirdColumnOption' || x.name !== this.thirdColumnOption.name) && (ignoreOption === 'fourthColumnOption' || x.name !== this.fourthColumnOption.name) ); }