从W3School复制的JS表格过滤脚本在Angular组件中无法运行

直接从W3School复制原生JavaScript表格过滤脚本到Angular组件的HTML中失效，主要是因为Angular的组件生命周期和DOM管理机制和原生JS不同——原生脚本可能在组件视图还没完全渲染时就执行，找不到目标DOM元素；另外Angular更推荐通过数据绑定而非直接操作DOM来实现功能。下面给你两种可行的解决方案：

方案一：适配原生JS逻辑到Angular生命周期 #

如果你想沿用原生的过滤逻辑，需要把脚本代码移到组件类中，并利用Angular的生命周期钩子确保DOM已准备好：

1. 在组件类中获取表格元素
   用ViewChild装饰器获取表格，避免直接使用document.getElementById：

   import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
   
   @Component({
     selector: 'app-table-filter',
     templateUrl: './table-filter.component.html',
     styleUrls: ['./table-filter.component.css']
   })
   export class TableFilterComponent implements AfterViewInit {
     @ViewChild('filterTable') filterTable!: ElementRef<HTMLTableElement>;
   
     ngAfterViewInit(): void {
       // 视图初始化完成后再绑定过滤事件
       const input = document.getElementById('myInput') as HTMLInputElement;
       input.addEventListener('keyup', () => this.filterTableRows());
     }
   
     filterTableRows(): void {
       const input = document.getElementById('myInput') as HTMLInputElement;
       const filter = input.value.toUpperCase();
       const table = this.filterTable.nativeElement;
       const tr = table.getElementsByTagName('tr');
   
       // 遍历表格行，隐藏不匹配的行
       for (let i = 0; i < tr.length; i++) {
         const td = tr[i].getElementsByTagName('td')[0];
         if (td) {
           const txtValue = td.textContent || td.innerText;
           if (txtValue.toUpperCase().indexOf(filter) > -1) {
             tr[i].style.display = '';
           } else {
             tr[i].style.display = 'none';
           }
         }
       }
     }
   }
   

2. 修改组件HTML
   给表格添加模板引用变量#filterTable：

   <input type="text" id="myInput" placeholder="搜索姓名..">
   <table #filterTable>
     <tr>
       <th>Name</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Alfreds Futterkiste</td>
       <td>Germany</td>
     </tr>
     <tr>
       <td>Berglunds snabbkop</td>
       <td>Sweden</td>
     </tr>
     <tr>
       <td>Island Trading</td>
       <td>UK</td>
     </tr>
     <tr>
       <td>Koniglich Essen</td>
       <td>Germany</td>
     </tr>
   </table>
   

方案二：Angular化的过滤方式（推荐） #

更符合Angular开发规范的方式是通过数据绑定+管道来实现，不需要直接操作DOM：

1. 定义组件数据源和过滤关键词

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-table-filter',
     templateUrl: './table-filter.component.html',
     styleUrls: ['./table-filter.component.css']
   })
   export class TableFilterComponent {
     filterKeyword = '';
     tableData = [
       { name: 'Alfreds Futterkiste', country: 'Germany' },
       { name: 'Berglunds snabbkop', country: 'Sweden' },
       { name: 'Island Trading', country: 'UK' },
       { name: 'Koniglich Essen', country: 'Germany' }
     ];
   }
   

2. 创建过滤管道
   可以用ng generate pipe filter命令快速创建，然后修改管道代码：

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({ name: 'filter' })
   export class FilterPipe implements PipeTransform {
     transform(items: any[], keyword: string): any[] {
       if (!items || !keyword) {
         return items;
       }
       return items.filter(item => 
         item.name.toUpperCase().includes(keyword.toUpperCase())
       );
     }
   }
   

   记得在app.module.ts的declarations数组中声明这个管道。

3. 修改组件HTML，用*ngFor和管道渲染

   <input type="text" [(ngModel)]="filterKeyword" placeholder="搜索姓名..">
   <table>
     <tr>
       <th>Name</th>
       <th>Country</th>
     </tr>
     <tr *ngFor="let item of tableData | filter: filterKeyword">
       <td>{{ item.name }}</td>
       <td>{{ item.country }}</td>
     </tr>
   </table>
   

这种方式完全遵循Angular的数据流，不需要手动操作DOM，也更易于维护和扩展。

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