如何使用Angular实现带复选框的事件状态多选下拉筛选UI

你可以直接硬编码状态选项，你之前复选框不显示是因为用了原生<select>组件，原生select默认不支持复选展示，要实现你要的筛选器UI，直接用复选框组合的方式写静态代码即可，参考如下实现：

静态HTML代码（纯UI无业务逻辑） #

<!-- 状态筛选器容器 -->
<div class="status-filter">
  <span class="filter-label">事件状态:</span>
  <!-- 复选框组 -->
  <label class="filter-item">
    <input type="checkbox" value="Successful">
    <span>成功（Successful）</span>
  </label>
  <label class="filter-item">
    <input type="checkbox" value="failed">
    <span>失败（failed）</span>
  </label>
  <label class="filter-item">
    <input type="checkbox" value="retry">
    <span>重试（retry）</span>
  </label>
</div>

可选配套CSS（对齐通用筛选器样式） #

.status-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  width: fit-content;
  background: #fff;
}
.filter-label {
  font-weight: 500;
  color: #374151;
}
.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #4b5563;
}
.filter-item input {
  cursor: pointer;
  margin: 0;
}

如果要保持下拉弹出式的筛选样式，只需要在外层加下拉触发按钮和弹出层容器即可，静态UI阶段可以直接默认展示弹出层内容，后续再补下拉交互逻辑即可，完全不需要依赖后端返回的events数组数据。

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