Angular输入框输入完成后触发Bootstrap Modal弹窗并查询数据如何实现

需求可行性 #

该需求完全可以实现，你当前写法失效的核心原因有两点：

• 原生Bootstrap的data-toggle/data-target属性依赖jQuery实现弹窗触发，和Angular的TS异步逻辑没有联动，会出现数据还未查询完成弹窗就已经弹出的时序问题
• 你当前的绑定逻辑是回车同时触发查询和弹窗，没有做先后顺序控制

推荐实现方案 #

优先使用Angular官方适配的ng-bootstrap组件库实现，无需引入jQuery，避免和Angular的DOM逻辑冲突，实现步骤如下：

1. 调整HTML模板 #

移除输入框上的原生Bootstrap触发属性，新增弹窗模板：

<input 
  (keyup.enter)="Search()" 
  [(ngModel)]="codeuser" 
  type="text" 
  placeholder="请输入用户编码"
>

<!-- 弹窗模板 -->
<ng-template #userInfoModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title">用户详情</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
  </div>
  <div class="modal-body" *ngIf="userInfo">
    <p>用户编码：{{userInfo.code}}</p>
    <p>用户姓名：{{userInfo.name}}</p>
    <p>所属部门：{{userInfo.dept}}</p>
    <!-- 按需补充其他展示字段 -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.close()">关闭</button>
  </div>
</ng-template>

2. 编写TS组件逻辑 #

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
// 引入你自己封装的后台请求服务
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  codeuser = '';
  userInfo: any = null;
  @ViewChild('userInfoModal') userInfoModal!: TemplateRef<any>;

  constructor(
    private modalService: NgbModal,
    private userService: UserService
  ) {}

  Search() {
    // 先做输入合法性校验
    const userCode = this.codeuser.trim();
    if (!userCode) return;

    // 先请求后台查询用户信息
    this.userService.getUserByCode(userCode).subscribe({
      next: (res) => {
        // 拿到返回数据后再打开弹窗
        this.userInfo = res;
        this.modalService.open(this.userInfoModal);
      },
      error: (err) => {
        // 可自行添加查询失败的提示逻辑
        console.error('用户查询失败：', err);
      }
    })
  }
}

原生Bootstrap兼容方案 #

如果你坚持使用原生Bootstrap+jQuery的实现方式，可按以下方式调整：

1. 确保已经在angular.json中正确引入jQuery和Bootstrap的JS资源
2. 在TS文件顶部声明jQuery全局变量，修改Search方法：

declare var $: any;

// 修改后的Search方法
Search() {
  const userCode = this.codeuser.trim();
  if (!userCode) return;
  this.userService.getUserByCode(userCode).subscribe(res => {
    this.userInfo = res;
    // 数据赋值完成后手动触发弹窗
    $('#myModal').modal('show');
  })
}

3. 移除输入框上的data-toggle和data-target属性即可：

<input (keyup.enter)="Search()" [(ngModel)]="codeuser" type="text" >

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