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

Posted 2023-03-13

【中文标题】选择第二个下拉 ng-model 对象时返回 null

【英文标题】：when selecting second dropdown ng-model object return null

【发布时间】：2021-12-03 08:40:52

【问题描述】：

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

因为它返回 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);

【问题讨论】：

只是想了解您的业务需求。您是否试图确保每个选择只能选择一次？在为帐户选择安全问题时可能会看到类似的情况？

这是一个demo 做的非常相似的事情。值得注意的是，与您的getAvailableColumnOptions 类似的getAvailableQuestions 函数非常干净。

雅各布，这太棒了。这几乎是我想要完成的。来自 allSecurityQuestions 数组的问题，前 3 个选项默认选择前 3 个选项，现在下拉列表显示数组的剩余 allSecurityQuestions。更改选项时（从下拉列表中选择的其他内容），以前默认选择的选项将被添加回 allSecurityQuestions 并被删除。

【参考方案1】：

那是因为选择getAvailableColumnOptions() 后会被触发。您正在过滤数据源以排除选定的选项。所以现在下拉列表在数据源中没有合适的模型，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)
    );

【讨论】：

但我确实有“secondColumnOption”等硬编码。你可能明白我为什么要排除。 Whenever dropdown option is selected, I don't want other dropdown options have that in the list, since its been selected somewhere else.不知道我怎么能做到这一点。

用代码更新了答案。我猜你想要这样的东西。

这就是我要找的。早些时候，我通过使用 和 ng-repeat 的简单字符串数组而不是对象数组解决了这个问题。但这对我来说好多了。现在唯一的问题是，使用此解决方案，不确定如何设置为每个选项选择的默认值以及在初始加载时不显示在每个下拉列表中的选项

你可以像this.secondColumnOption = this.allAvailableColumnOptions[0];一样简单地设置默认值