Angular中按系统名称或IP地址搜索列表无正确响应问题求助

我帮你梳理下当前搜索功能无法正确响应的核心问题，然后给出针对性的修复步骤：

问题诊断 #

1. IP地址正则匹配错误：你当前使用的正则/^[+-]?\d+(\.\d+)?$/只能匹配单个整数或小数（比如123或123.45），但标准IPv4地址是四段点分十进制格式（比如192.168.1.1），导致输入IP时会被误判为"系统名称"，传递错误的请求参数。
2. 搜索输入未触发列表刷新：onSearch方法仅更新了nameVal变量，但没有调用fetchList()发起新的请求，所以输入搜索内容后不会获取过滤后的列表数据。
3. 空搜索值的参数处理不当：当搜索框清空时，会给后端传递name=的无效参数，多数后端接口期望空搜索时不传递过滤参数，直接返回全部数据。

具体修复方案 #

1. 修正IP地址匹配正则 #

替换service中的正则为能正确识别IPv4地址的表达式：

listPagination(currentPage, itemsPerPage, name): Observable<any[]> {
  const trimmedName = name?.trim() || '';
  // 匹配标准IPv4地址的正则
  const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  const isIpAddress = ipRegex.test(trimmedName);

  let params = new HttpParams();
  params = params.append('page', currentPage);
  params = params.append('limit', itemsPerPage);

  // 仅当搜索值非空时添加过滤参数
  if (trimmedName) {
    params = isIpAddress 
      ? params.append('ipAddress', trimmedName) 
      : params.append('name', trimmedName);
  }

  const editUrl = `${this.fetchApi1}?${params}`;
  return this.http.get<any>(editUrl);
}

2. 搜索输入时触发列表刷新 #

修改component.ts中的onSearch方法，更新搜索值后立即调用列表获取方法：

onSearch(name) {
  this.nameVal = name.trim(); // 去除前后空格，避免无效空格搜索
  this.fetchList(); // 触发新的列表请求
}

3. 可选：添加搜索防抖优化（提升性能） #

如果用户输入频繁，连续触发请求会影响性能，可以用RxJS的防抖功能限制请求频率：

import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

// 组件类内定义Subject用于搜索事件流
private searchSubject = new Subject<string>();

ngOnInit() {
  // 订阅搜索流，300ms内仅触发最后一次请求
  this.searchSubject.pipe(debounceTime(300))
    .subscribe(searchVal => {
      this.nameVal = searchVal;
      this.fetchList();
    });
}

onSearch(name) {
  this.searchSubject.next(name.trim());
}

ngOnDestroy() {
  this.searchSubject.unsubscribe(); // 组件销毁时取消订阅，避免内存泄漏
}

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