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

Question

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

因为它 returns 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)
    );
}

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

when selecting second dropdown ng-model object return null

javascript

html

angular

angularjs

typescript