建立网站教程今天的新闻 最新消息

建立网站教程,今天的新闻 最新消息,世界互联网峰会官网,网站建设与维护是什么内容业务逻辑梳理 业务流程#xff1a; 初始化#xff1a;可能有历史选中值#xff08;previousAppliedFilters#xff09;把历史值 normalize 成对象数组 { name, value, checked }选中 / 取消 Test Type#xff1a;点击 checkbox 或标签上的 对象的 checked 属性同步更新选中…业务逻辑梳理业务流程初始化可能有历史选中值previousAppliedFilters把历史值 normalize 成对象数组 { name, value, checked }选中 / 取消 Test Type点击 checkbox 或标签上的 ×对象的 checked 属性同步更新选中列表 selectedTestType / selectedLocationTestType 同步更新应用 Filter点击 “Apply Filter”将选中值整理可选择发送给后端或者 emit 给父组件可以保存为 previousAppliedFilters 方便下次打开初始化再次查看Filter 应用后重新打开弹窗初始化逻辑会用 previousAppliedFilters 恢复选中状态UI 显示已选项标签 ×scheduling-filter.component.html!--scheduling-filter.component.html--divh3Test Type Filter/h3div*ngForlet item of testTypeListinput typecheckbox[checked]item.checked(change)onChecked(item, testType)/{{item.name}}/divdivh4Selected Test Types:/h4span*ngForlet item of selectedTestType{{item.name}}button(click)removeTestType(item)×/button/span/divbutton(click)applyFilter()Apply Filter/button/divscheduling-filter.component.ts// scheduling-filter.component.tsimport{Component,OnInit,Output,EventEmitter}fromangular/core;Component({selector:app-scheduling-filter,templateUrl:./scheduling-filter.component.html,styleUrls:[./scheduling-filter.component.css]})exportclassSchedulingFilterComponentimplementsOnInit{Output()appliedFilternewEventEmitterany();// 模拟 Test Type 数据testTypeList[{name:BDS,value:BDS,checked:false},{name:DRE,value:DRE,checked:false},{name:MRI,value:MRI,checked:false}];selectedTestType:any[][];searchedTestType:any[][];previousAppliedFilters:any{testType:[BDS]// 历史选中};ngOnInit():void{// 初始化历史值if(this.previousAppliedFilters.testType?.length){this.selectedTestTypethis.previousAppliedFilters.testType.map((t:any){if(typeoftstring)return{name:t,value:t,checked:true};if(t?.name)return{...t,checked:true};returnnull;}).filter(Boolean);// 同步 testTypeList checkedthis.testTypeList.forEach(item{item.checkedthis.selectedTestType.some(selsel.nameitem.name);});this.searchedTestType[...this.testTypeList];}}onChecked(event:any,selectedFilter:string){consttargetListselectedFiltertestType?this.selectedTestType:[];this.testTypeList.forEach(item{if(item.nameevent.name){item.checked!item.checked;}});// 更新 selectedTestTypethis.selectedTestTypethis.testTypeList.filter(itemitem.checked);}removeTestType(item:any){item.checkedfalse;this.selectedTestTypethis.selectedTestType.filter(selsel.name!item.name);}applyFilter(){console.log(Apply Filter Selected:,this.selectedTestType);this.appliedFilter.emit({testType:this.selectedTestType.map(t({...t}))// 深拷贝});// 保存历史选中this.previousAppliedFilters.testTypethis.selectedTestType.map(tt.name);}}app.component.htmlapp-scheduling-filter(appliedFilter)onAppliedFilter($event)/app-scheduling-filterapp.component.tsonAppliedFilter(selected:any[]){console.log(父组件收到选中数据:,selected);}