AltText搜索下拉选中后点击Filter无法过滤数据问题排查

当前系统运行无报错，AltText搜索框下拉能正常展示匹配输入的候选数据，但选中某一AltText选项后，点击Filter按钮，页面表格仍加载全部数据，未按选中项过滤。曾尝试在Model层添加过滤逻辑（已注释）但未生效，附上相关代码片段，寻求问题原因与解决办法。

相关代码片段 #

HTML部分

<div class="filter-group">
  <input type="text" ng-model="selectedAltText" uib-typeahead="item for item in getAltTextSuggestions($viewValue)" />
  <button ng-click="applyFilter()">Filter</button>
</div>
<table>
  <tr ng-repeat="item in dataList">
    <td>{{item.altText}}</td>
    <td>{{item.otherField}}</td>
  </tr>
</table>

AngularJS控制器

app.controller('DataController', function($scope, DataService) {
  $scope.dataList = [];

  $scope.getAltTextSuggestions = function(input) {
    return DataService.getAltTextSuggestions(input);
  };

  $scope.applyFilter = function() {
    // 此处发起请求获取过滤后的数据
    DataService.getDataList({altText: $scope.selectedAltText})
      .then(function(response) {
        $scope.dataList = response.data;
      });
  };
});

搜索框JS（Typeahead逻辑）

app.service('DataService', function($http) {
  this.getAltTextSuggestions = function(input) {
    return $http.get('/api/alt-text/suggestions', {params: {q: input}})
      .then(function(response) {
        return response.data;
      });
  };

  this.getDataList = function(filterParams) {
    return $http.get('/api/data/list', {params: filterParams});
  };
});

后端Controller（Java示例）

@RestController
@RequestMapping("/api/data")
public class DataController {

  @Autowired
  private DataService dataService;

  @GetMapping("/list")
  public ResponseEntity<List<DataDTO>> getDataList(@RequestParam(required = false) String altText) {
    List<DataDTO> dataList = dataService.getDataList(altText);
    return ResponseEntity.ok(dataList);
  }
}

后端Service/Model层（Java示例）

@Service
public class DataService {

  @Autowired
  private DataMapper dataMapper;

  public List<DataDTO> getDataList(String altText) {
    // 曾尝试添加的过滤逻辑（已注释）
    // if (altText != null && !altText.isEmpty()) {
    //   return dataMapper.selectByAltText(altText);
    // }
    return dataMapper.selectAll();
  }
}

问题排查方向与解决办法 #

1. 前端参数传递校验

   • 在applyFilter方法中打印$scope.selectedAltText，确认选中的值是否正确传递到请求参数中：

     $scope.applyFilter = function() {
       console.log('选中的AltText值:', $scope.selectedAltText);
       // 后续请求逻辑
     };
     

   • 检查请求的URL参数，确认altText参数是否携带了选中值。

2. 后端参数接收校验

   • 在Controller的getDataList方法中打印接收的altText参数，确认是否接收到前端传递的值：

     @GetMapping("/list")
     public ResponseEntity<List<DataDTO>> getDataList(@RequestParam(required = false) String altText) {
       System.out.println("接收到的AltText参数：" + altText);
       // 后续业务逻辑
     }
     

   • 确保前后端参数名称完全一致（比如前端传altText，后端不能写成alt）。

3. Model层过滤逻辑修复

   • 取消注释的过滤逻辑，确保分支判断正确执行：

     public List<DataDTO> getDataList(String altText) {
       if (altText != null && !altText.isEmpty()) {
         return dataMapper.selectByAltText(altText);
       }
       return dataMapper.selectAll();
     }
     

   • 检查Mapper层的selectByAltText方法，确认SQL语句是否正确拼接了alt_text = ?的过滤条件，比如MyBatis XML：

     <select id="selectByAltText" parameterType="String" resultType="DataDTO">
       SELECT * FROM data_table WHERE alt_text = #{altText}
     </select>
     

4. SQL执行日志验证

   • 开启后端SQL日志，查看实际执行的SQL语句是否包含AltText过滤条件。比如Spring Boot项目在application.yml中添加：

     logging:
       level:
         org.hibernate.SQL: DEBUG
         org.apache.ibatis.logging.stdout.StdOutImpl: DEBUG
     

   • 通过日志确认过滤条件是否被正确应用，排除SQL语法错误或参数绑定问题。

内容的提问来源于stack exchange，提问作者kaku