Angular搜索栏功能异常：输入关键词无匹配且页面自动刷新

问题分析 #

当前代码存在两个核心问题：

1. 页面持续刷新：表单默认提交行为未被阻止，触发后会导致页面重载
2. 过滤功能不生效：绑定数组错误、属性调用方式错误、初始化判断逻辑错误

具体修复步骤 #

1. 解决页面持续刷新问题 #

表单的submit事件会默认触发页面跳转/刷新，有两种修复方式：

方式一：阻止表单默认提交行为

修改HTML中的form标签，添加(submit)="$event.preventDefault()"：

<div class="search-bar">
  <form class="search-form d-flex align-items-center" (submit)="$event.preventDefault()">
    <input type="text" name="query" placeholder="Search" title="Enter search keyword" (keyup)="filterUsers($event)">
    <button type="submit" title="Search"><i class="bi bi-search"></i></button>
  </form>
</div>

方式二：将提交按钮改为普通按钮

把按钮的type="submit"改为type="button"，避免触发表单提交：

<button type="button" title="Search"><i class="bi bi-search"></i></button>

2. 修复过滤功能不生效问题 #

（1）绑定正确的过滤后数组

HTML中*ngFor当前绑定的是原始users数组，需要改为绑定filteredUsers：

<ul>
  <li *ngFor="let user of filteredUsers">
    {{ user.name }}
  </li>
</ul>

（2）修正用户属性调用方式

filterUsers方法中错误地将user.name当作方法调用（user.name()），实际从Firebase获取的name是字符串属性，应改为：

this.filteredUsers = this.users.filter(user => 
  user.name.toLowerCase().includes(searchTerm)
);

（3）修正Firebase应用初始化判断

原代码中!initializeApp.length逻辑错误（initializeApp是函数，无length属性），应使用getApps().length判断是否已初始化：

ngOnInit() {
  if (getApps().length === 0) {
    initializeApp(this.firebaseConfig);
  }
  // 其他代码...
}

（4）优化过滤逻辑

添加空搜索词处理、去除空格、统一大小写匹配，提升用户体验：

filterUsers(event: any) {
  const searchTerm = event.target.value.toLowerCase().trim();
  // 搜索词为空时显示全部用户
  if (!searchTerm) {
    this.filteredUsers = [...this.users];
    return;
  }
  this.filteredUsers = this.users.filter(user => 
    user.name.toLowerCase().includes(searchTerm)
  );
}

修改后的完整代码 #

dashboard.component.html #

<div class="search-bar">
  <form class="search-form d-flex align-items-center" (submit)="$event.preventDefault()">
    <input type="text" name="query" placeholder="Search" title="Enter search keyword" (keyup)="filterUsers($event)">
    <button type="submit" title="Search"><i class="bi bi-search"></i></button>
  </form>
</div>

<ul>
  <li *ngFor="let user of filteredUsers">
    {{ user.name }}
  </li>
</ul>

dashboard.component.ts #

import { Component, OnInit } from '@angular/core';
import { initializeApp, getApps } from "firebase/app";
import { getDatabase, ref, onValue, DataSnapshot } from "firebase/database";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  users: any[] = [];
  filteredUsers: any[] = []; 

  firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  
  ngOnInit() {
    if (getApps().length === 0) {
      initializeApp(this.firebaseConfig);
    }
    const database = getDatabase();
    const usersRef = ref(database, 'users');
    
    onValue(usersRef, (snapshot: DataSnapshot) => {
      const data = snapshot.val();
      this.users = data ? Object.values(data) : []; 
      this.filteredUsers = [...this.users];
    });
  }

  filterUsers(event: any) {
    const searchTerm = event.target.value.toLowerCase().trim();
    if (!searchTerm) {
      this.filteredUsers = [...this.users];
      return;
    }
    this.filteredUsers = this.users.filter(user => 
      user.name.toLowerCase().includes(searchTerm)
    );
  }
}

内容的提问来源于stack exchange，提问作者Mohamed Seif Ben Salah