＜input type=“text“ placeholder=“Search..“ [(ngModel)]=“searchText“ (input)=“search()“ /＞代码分析

flowchartTDA[用户在输入框输入]-->B[(ngModel)更新 searchText]B-->C[(input)调用search()]C-->D[过滤 testTypeList 得到 filteredTestTypeList]D-->E[页面显示过滤后的列表]F[用户点击复选框]-->G[toggleTestType(item)]G-->H{item.checked?}H-->|true且未在 selectedTestType|I[加入 selectedTestType]H-->|false且在 selectedTestType|J[从 selectedTestType 删除]I-->K[页面显示更新后的已选列表]J-->K

<divclass="dropdown"><input type="text"placeholder="Search.."[(ngModel)]="searchText"(input)="search()"/><div*ngFor="let item of filteredTestTypeList"class="option"><input type="checkbox"[checked]="item.checked"(change)="toggleTestType(item)"/><label>{{item.name}}</label></div><button(click)="applyFilter()">Apply Filter</button><divclass="selected-items"><span*ngFor="let item of selectedTestType">{{item.name}}</span></div></div>

import{Component,OnInit,Output,EventEmitter}from'@angular/core';interfaceTestTypeItem{name:string;value:string;checked?:boolean;}@Component({selector:'app-location-test-type',templateUrl:'./location-test-type.component.html',styleUrls:['./location-test-type.component.css']})exportclassLocationTestTypeComponentimplementsOnInit{// 搜索输入searchText:string='';// 全部 Test Type 列表testTypeList:TestTypeItem[]=[{name:'test1',value:'test1'},{name:'test2',value:'test2'},{name:'test3',value:'test3'}];// 用户选中的 Test TypeselectedTestType:TestTypeItem[]=[];// 搜索后的列表filteredTestTypeList:TestTypeItem[]=[];// 把选中数据 emit 给父组件@Output()selected=newEventEmitter<TestTypeItem[]>();ngOnInit():void{this.filteredTestTypeList=[...this.testTypeList];}// 选中 / 取消toggleTestType(item:TestTypeItem){item.checked=!item.checked;constindex=this.selectedTestType.findIndex(x=>x.name===item.name);if(item.checked&&index===-1){this.selectedTestType.push(item);}elseif(!item.checked&&index>-1){this.selectedTestType.splice(index,1);}}// 搜索search(){consttext=this.searchText.toLowerCase();this.filteredTestTypeList=this.testTypeList.filter(item=>item.name.toLowerCase().includes(text));}// 应用 FilterapplyFilter(){// Emit 给父组件this.selected.emit(this.selectedTestType);}}

1. [(ngModel)]=“searchText”

这是 Angular 的 双向数据绑定。

ngModel 是 Angular Forms 模块提供的指令，用来绑定表单控件（如 ）的值和组件里的属性。

[(…)] 是 双向绑定语法糖（也叫 Banana in a box，因为看起来像 [(…)]）。

作用：
视图 → 组件：用户在输入框输入内容时，组件里的 searchText 会自动更新。

组件 → 视图：如果在组件里修改了 searchText，输入框的值也会自动更新。

举例：

// component.tssearchText='初始值';<input type="text"[(ngModel)]="searchText"/>

页面输入框会显示“初始值”

用户修改输入框的内容时，searchText 会跟着更新

2. (input)=“search()”

这是 事件绑定，表示监听 input 事件：

当用户在输入框里输入内容时，会触发 input 事件。

触发后调用组件里的 search() 方法。

结合 [(ngModel)]：

<input type="text"[(ngModel)]="searchText"(input)="search()"/>

逻辑就是：

• 用户输入 → searchText 更新

• search() 方法执行 → 根据最新的 searchText 过滤列表

总结

所以组合起来就是：
用户每输入一个字符 → 更新 searchText → 调用 search() → 更新 filteredTestTypeList → 页面显示最新过滤后的列表。