Angular 7：通过按钮获取输入框文本并存入变量用于Firebase查询

看起来你已经搭好了基础的代码框架，只需要调整几个关键细节就能让功能正常跑起来。我来帮你修正并拆解核心步骤：

1. 修正输入框的双向数据绑定 #

你的HTML输入框用了ng-model，但Angular里正确的双向绑定语法是[(ngModel)]，而且要和组件类里的变量一一对应，这样输入的内容会自动同步到组件变量中，不用手动去DOM里取值：

<input type="text" class="form-control" [(ngModel)]="resultCI" id="textCI" placeholder="C.I." >
<!-- 别忘了加触发查询的按钮 -->
<button (click)="buscarCI()" class="btn btn-primary">Buscar por C.I.</button>

2. 调整组件类的代码逻辑 #

接下来修改你的component.ts，确保变量和方法正确关联，同时加入输入校验和适配Angular版本的RxJS语法：

import { Component } from '@angular/core';
import { map } from 'rxjs/operators'; // 导入RxJS的map操作符

@Component({
  // 这里放你的组件元数据，比如selector、templateUrl等
})
export class YourComponent {
  // 声明绑定输入框的变量，初始化为空字符串
  resultCI: string = '';
  contactos: any[] = []; // 假设你已经声明了这个变量存储查询结果

  constructor(private servicio: TuServicio) {} // 注入你的Firebase服务

  buscarCI() {
    // 先做输入校验，避免空值查询
    if (!this.resultCI.trim()) {
      this.contactos = []; // 清空结果列表
      alert('Por favor ingresa un C.I. válido');
      return;
    }

    // 直接用绑定好的resultCI作为查询参数
    const query = this.servicio.getUsuarioFiltro(this.resultCI);
    
    query.snapshotChanges()
      .pipe(
        map(changes => {
          // 转换Firebase返回的数据格式，带上节点key
          return changes.map(c => ({
            key: c.payload.key,
            ...c.payload.val()
          }));
        })
      )
      .subscribe(contactos => {
        this.contactos = contactos;
      }, error => {
        // 可以添加错误处理逻辑
        console.error('Error al buscar usuario:', error);
      });
  }
}

3. 别忘了导入FormsModule #

如果你的模块还没导入FormsModule，[(ngModel)]会直接失效，所以要在对应的NgModule中添加：

import { FormsModule } from '@angular/forms';
import { YourComponent } from './your-component.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    // 其他你需要的模块，比如CommonModule等
    FormsModule
  ]
})
export class YourModule { }

关键细节说明 #

• 双向绑定的作用：[(ngModel)]让输入框内容和组件变量实时同步，省去了手动操作DOM取值的麻烦
• 输入校验：先判断输入是否为空，避免发送无意义的Firebase查询
• RxJS语法适配：Angular 6+版本中，RxJS操作符需要通过pipe()调用，而不是直接链式调用map
• 命名规范：遵循TypeScript小驼峰命名习惯，用resultCI代替ResultCI更符合行业惯例

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