这个客户的需求有些特别：要求单击表格行时自动勾选复选框（checkbox），同时在没有勾选任何行的情况下，相关按钮必须处于禁用状态。这种交互场景在实际项目中相当普遍，其设计思路也值得参考。
实现代码并不复杂，首先来看 HTML 表格部分的代码：
Logout Warnning
Your ha ve working order(s). if you logout the order(s) will be returned to the Pick Queue and all unconfirmed handling units will remove. Do you want to continue logout"table">
Phase Code Delivery Product {{task.phaseCode}} {{task.saP_DeliveryOrder_ID}} {{task.saP_ProductOrder_ID|removeLeadingZeros}}
接下来是核心的控制逻辑部分，主要实现全选、反选以及按钮启用/禁用状态的自动判断：
checkAll(ev: any) {
this.releaseTasks.releaseTaskDetails.forEach((x:any) => x.isChecked = ev.target.checked)
}
isAllChecked() {
if(this.releaseTasks.releaseTaskDetails.length > 0
return this.canRelease = this.releaseTasks.releaseTaskDetails.every((_:any) => _.isChecked);
}
return false;
}
onModalSelectedRows(task
:
any) {
task.
isChecked
=
!
task.
isChecked;
let
len
=
0;
this.
releaseTasks.
releaseTaskDetails.
forEach((item
:
any)
=>
if(
item.
isChecked) {
len
++;
}
});
if(
len
===
0) {
this.
canRelease
=
false;
else{
this.
canRelease
=
true;
}
}
后台 Controller 部分用于查询当前用户未完成的操作记录，并将结果组装成视图模型后返回给前端：
var activityQuery = from op in _context.OperatorActivities where op.Operator_ID == userName && !op.IsComplete && !op.IsReleased && !op.IsException select op;
ReleaseTask relesaseTask = new ReleaseTask();
if(activityQuery.Any()){
foreach (var activity in activityQuery)
{
ReleaseTaskViewModel taskDetail = new ReleaseTaskViewModel();
taskDetail.SAP_DeliveryOrder_ID = getOrderById(activity.DeliveryOrder_ID);
taskDetail.SAP_ProductOrder_ID = getProductOrderById(activity.ProductionOrder_ID);
taskDetail.PhaseCode = activity.ActivityCode;
taskDetail.isChecked = true;
taskDetail.OperatorActivityId = activity.OperatorActivity_ID;
taskDetail.DeliveryOrder_ID = activity.DeliveryOrder_ID;
taskDetail.ProductionOrder_ID = activity.ProductionOrder_ID;
taskDetail.Operator_ID = activity.Operator_ID;
taskDetail.OrderId = activity.ActivityCode == "MAKE" ? activity.ProductionOrder_ID : activity.DeliveryOrder_ID;
taskDetail.isPersistent = isPersistent(activity.ProductionOrder_ID);
if(!taskDetail.isPersistent) {
relesaseTask.ReleaseTaskDetails.Add(taskDetail);
}
}
}
return(Ok(new { success = true, data = relesaseTask}));
总体来看，该需求的关键实现要点如下：点击表格行时切换对应 checkbox 的选中状态，同时实时统计已勾选行的数量。当选中数量为零时，将“Release and logout”按钮置为禁用；有任意行被选中时，按钮则恢复启用。全选复选框通过 isAllChecked() 和 checkAll() 方法实现联动，逻辑清晰且易于扩展。如果遇到类似的场景，直接套用这套基于 Angular 的事件绑定与状态管理模式，即可快速完成开发。
