如何 select 在 angular 10 中一次只有一個 div

Question

我必須在我的應用程序中創建一個排序過濾器，我可以 select 一次只有一個選項來對我的結果進行排序。 我的 UI 無法使用復選框。 這是一個簡單的列表。 所以我正在通過 div 創建列表。 任何人都可以建議如何實施 angular 中 div 的選擇和取消選擇。 我一次只能 select 一個 div。 此外，如果我選擇了任何選項，現在我點擊選項 2，那么選項 1 div 應該被取消選擇，選項 2 div 應該被選中。

Answer 1

一種解決方案是在單擊 div 時設置“當前”值。 當“當前”值與項目值匹配時，添加 class。

<div *ngFor="let item of items" 
(click)="onItemSelection(item) 
[class.current-selection]="item === currentValue">
   {{ item }}
</div>

通過存儲新值來處理 component.ts 文件中的事件：

currentValue: string;

onItemSelection(newValue: string) {
   this.currentValue = newValue;
}

然后更新 component.scss 文件中當前項目的外觀：

.current-selection {
  background-color: green;
}