iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

Angular10 實作教學系列 第 11

NG10鐵人賽 - 11 - 型別實作(3) - enum 和 switch 重疊值顯示相同內容

一般 switch 匹配對象 應該只有單個,可當你需要複數配對,可以參照下面 code

interface.ts

export enum Role {
    系統管理員,
    一般人員,
    銷售員
}

component.ts

Role = Role; // 主要是讓 html 可以用 enum 的 intellisense,但還是用 ['XXX'] 才不會報錯
userRole: Role; // 角色的值

html

<ng-container [ngSwitch]="userRole">
    <ng-container *ngSwitchCase="(Role['系統管理員'] === userRole || Role['一般人員'] === userRole) ? userRole : 'None'">
        系統管理員 或 一般人員 顯示內容
    </ng-container>
    <ng-container *ngSwitchCase="Role['銷售員']">
        銷售員內容
    </ng-container>
</ng-container>

'None' 是怕 userType.value 對應到 null 或 '' 都還是會顯示


上一篇
NG10鐵人賽 - 10 - 型別實作(2) - enum 轉陣列實作
下一篇
NG10鐵人賽 - 12 - 圖片(1) - 顯示
系列文
Angular10 實作教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言