Angular服务中如何向带observable的函数传参实现SQL查询参数传递

核心问题定位 #

你遇到的问题按优先级排查：

• 接口请求仅在组件初始化ngOnInit时执行了一次，此时MedicineName为你设置的初始空值，后续用户在输入框填内容时没有触发新的接口请求，参数自然不会更新
• 未导入FormsModule导致ngModel双向绑定失效，输入框的值没有同步到组件的MedicineName变量

修复步骤 #

1. 前置依赖检查

你使用了[(ngModel)]双向绑定，需要先确认组件所属的模块已经导入FormsModule，否则输入内容不会同步到TS变量：

// 组件所属模块，比如AppModule或者对应业务模块
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有导入
    FormsModule
  ],
  // 其他模块配置
})
export class AppModule { }

2. 新增搜索触发逻辑

推荐优先用按钮触发搜索，避免输入过程中频繁发请求：

• 修改itemsearch.component.html，在输入框下方加搜索按钮：

<!-- 所有输入框结束后、表格之前添加 -->
<button (click)="loadSearchResult()">搜索</button>

• 修改itemsearch.component.ts，把接口调用抽为独立方法，支持触发时获取最新参数：

export class ItemsearchComponent implements OnInit {
  lstitems?: Items[]; 
  MedicineName: string = "";
  CompanyName: string = "";
  Composition: string = "";
  Purpose: string = "";
  
  constructor(public _freeApiService: FreeapiService) {}

  ngOnInit(): void {
    // 如果初始需要加载全量数据可以保留，否则直接删掉即可
    this.loadSearchResult();
  }

  // 新增搜索触发方法，会拿到当前最新的输入值
  loadSearchResult() {
    this._freeApiService.getItems(this.MedicineName).subscribe(data=> {
      this.lstitems = data;
    }); 
  }
}

3. 后端接口注意事项

Node.js侧接收参数时必须使用参数化查询拼接SQL，禁止直接拼接字符串，避免SQL注入风险，参考写法（以mssql库为例）：

// 错误写法，会被SQL注入：
// await sql.query(`SELECT * FROM 表名 WHERE Product_Name = '${req.query.var1}'`)

// 正确参数化写法：
const request = new sql.Request()
request.input('medicineName', sql.NVarChar, req.query.var1)
const result = await request.query('SELECT * FROM 表名 WHERE Product_Name = @medicineName')
res.send(result.recordset)

可选：实时搜索实现 #

如果需要输入时自动刷新结果，可以给输入框加输入事件，搭配RxJS防抖优化避免请求过于频繁：

<!-- 给药品名称输入框加input事件 -->
<input type="text" [(ngModel)]="MedicineName" (input)="loadSearchResult()" >

TS添加防抖逻辑：

import { debounceTime, Subject } from 'rxjs';

export class ItemsearchComponent implements OnInit {
  private searchSubject = new Subject<string>();

  ngOnInit(): void {
    // 防抖300ms，用户停止输入300ms后再发请求
    this.searchSubject.pipe(debounceTime(300)).subscribe(searchVal => {
      this._freeApiService.getItems(searchVal).subscribe(data=> {
        this.lstitems = data;
      });
    })
  }

  loadSearchResult() {
    this.searchSubject.next(this.MedicineName);
  }
}

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