选择第二个下拉ng-model对象时返回null

Question

当我下拉选择时，我的ng-model对象变成null，不知道为什么。

因为它返回null我得到以下错误:

TypeError: Cannot read properties of null (reading 'name')

我的代码

<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);
}

Answer 1

这是因为选择后getAvailableColumnOptions()将被触发。这样，您就可以过滤数据源以排除选定的选项。所以现在下拉菜单在数据源中没有合适的模型，ng-model将被清除。

乌利希期刊指南:

<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)
);
}