發表文章

[Angular] 在按鈕角落顯示的徽章或標示的TailwindCSS作法

                <!-- 角落徽章(照你的畫面放右上角、黃色背景) -->               < span                 class = " absolute -top-2 -right-2 inline-flex items-center justify-center text-xs font-semibold rounded bg-yellow-400 text-black w-5 h-5 "               >                 2               </ span >

[UI] 粉嫩色碼蒐集

  我是顏色#BCCEFB 我是顏色#F0BF4C  我是顏色#F59794 我是顏色#EB94CF   我是顏色#D094EA 我是顏色#C6BEEE  我是顏色#9EEB47 我是顏色#D4ED31  我是顏色#F0BF4C 我是顏色#5BD1D7 

[Angular] npm run apigen 時,出現self-signed certificate 錯誤訊息的解決方法

  使用 npm run apigen 時 錯誤訊息回應 Error on API generation from https://localhost:xxxx/swagger/v1/swagger.json: ResolverError: Error downloading hts://localhost:xxxx/swagger/v1/swagger.json self-signed certificate 時, 短期解決方式為 輸入以下內容  $env:NODE_TLS_REJECT_UNAUTHORIZED=0 讓驗證可以通過

[Angular] 點兩下變為編輯狀態的方式

    <!-- 姓名 -->       < div         [ ngStyle ] = " { display : checkIsHaveValue ( ' ebcI0010 ' ) ? ' block ' : ' none ' } "       >         < div           class = " ss:flex ss:flex-col ss:items-stretch ss:justify-center lg:flex lg:flex-row lg:flex-wrap lg:items-center lg:justify-start lg:gap-2 "         >           < h3 > 姓名: </ h3 >           < div >             < h3               [ ngStyle ] = " {                 display : editable [ ' editable0010 ' ] ? ' none ' : ' block '               } "               ( dblclick ) = " toggleEdit ( ' editable0010 ' ) "           ...

[UI] 文字檔案下載呈現方式

    moduleFilesArray : any [] | null | undefined = [] ;   < ng-container * ngFor = " let row of moduleFilesArray ; let i = index " >           < div class = " m-1 " >             < a               mat-button               target = " _blank "               class = " underline text-lg "               ( click ) = " downloadHistroyTemplate ( i ) "               >{{ row }}</ a             >           </ div >         </ ng-container >   downloadHistroyTemplate ( fileId : number ) {     const getName = this . moduleFilesArray ?. [ fileId ] . fileName ;     const myDownReq : ModuleHistory = { ...

[Angular] fix the unable_to_get_issuer_cert_locally error

Temporarily stop rigid SSL verification npm config set strict-ssl false Change the default public registry version to HTTP npm config set registry http://registry.npmjs.org/

[Angular] 要在專案中,開啟外部網站連結的方法

  因為一般的windows.open(url) 用法 如果url非專案網站的同網址 就會因為同源政策(Same-origin policy)被擋住 所以要繞過 必須使用 DomSanitizer 官網:https://angular.io/guide/security#xss 首先先引用 import { DomSanitizer } from ' @angular/platform-browser ' ;   constructor (         private sanitizer : DomSanitizer ,   ) {} 而chatGPT的回應 符合邏輯和語法 但是實際上無法這樣使用 chatGPT的回應(以下程式碼無法使用): // 信任 URL const trustedUrl = this . sanitizer . bypassSecurityTrustUrl (Url); // 將 SafeUrl 轉換為字串 const urlString = trustedUrl. toString (); // 打開 URL window . open (urlString); 實務上 要做以下調整 在windows.open() 裡面建立protocol和取得 bypassSecurityTrustUrl() 這個object的內容     // 打開信任的 URL     window . open (       window . location . protocol +         ' // ' +         ( this . sanitizer . bypassSecurityTrustUrl ( lOpenUrl ) as any )           . changingThisBreaksApplicationSecurity ,     ) ; 也可以寫成這樣   ...

[Angular] 使用routerlink來根據組成網址加上/?aaaa=ooooo的參數傳遞

測試:http://10.172.207.72/webdoc/FINANCE/PayForm/PayFormView.asp?aplno=1207000006 正式: http://intranet.pscnet.com.tw/webdoc/FINANCE/PayForm/PayFormView.asp?aplno=1207000719 payApplicationNoURL = environment . PaymentApplicationNoURL ;     < a                 [ routerLink ] = " [ payApplicationNoURL ] "                 [ queryParams ] = " { aplno : element . formId } "                 matTooltip = " {{ payApplicationNoURL }} "                 >{{ element . formId }}</ a               > 但是實際上這樣只能在網頁有的頁面使用而已 因為路徑會發現網站沒這路徑 就跳回登入頁面

[Angular] 使用cli指令,一次增加module和module-route

   ng generate module demandDepartment --route demandDepartment --module app.module

[Angular Material] Star Rating 星星評分做法(有兩種)

  Angular Material Star Rating - StackBlitz Angular 6 Stars Rating Component - Plunker (plnkr.co)

[Angular] 使用Pipe來解決innerHTML造成的 sanitizing HTML stripped some content 錯誤

  使用Angular嵌入HTML 會造成錯誤 因為ANGULAR架構會避免XSS攻擊 會對內容做編譯 這樣我們要呈現的內容就會被削掉 所以要使用自定義的pipe來消毒 讓內容可以轉換並呈現 https://stackoverflow.com/questions/39681163/angular-2-sanitizing-html-stripped-some-content-with-div-id-this-is-bug-or-fe https://stackoverflow.com/questions/47681813/angular-sanitizing-html-stripped-some-content-on-css-style html <mat-card [innerHTML]="activeMeterApiFormat | sanitizeHtml"></mat-card> ts //#region 串cr004GetHtml API     this.cr004Service.cr004GetHtml$Json$Response(params).subscribe({       next: (res: any) => {         this.activeMeterApiFormat = Object.values(res.body.body!).toString();       },     });     //#endregion Pipe import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @Pipe({   name: 'sanitizeHtml' }) export class SanitizeHtmlPipe implements PipeTransform {   constructor(private _san...

[Angular Material] 在table抓取最後一行做樣式

  angular material table中 因為*matRowDef是語法糖 裡面包含了*ngFor 所以可以運用 https://angular.io/api/common/NgForOf#local-variables 中的導出值 所以加上   let last = last 以及加上   [ ngClass ] = " { ' last-child ' : last } " 讓指定的最後一個元素有class 有了class後就能用css去指定並設定樣式 HTML   < tr               mat-row               * matRowDef = "                 let row ;                 columns : innerDisplayedColumns ;                 let last = last               "               [ ngClass ] = " { ' last-child ' : last } "             ></ tr > CSS . last-child {   font-weight : bold ; }

[Git] 檔案路徑過長導致git無法儲存解法

  让 git 支持长文件名_徐晓伟的博客-CSDN博客 https://blog.csdn.net/qq_32596527/article/details/105799844 cmd 运行(需要将 git 添加到环境变量中): git config --global core.longpaths true 如果是Windows 10,还需要通过注册表或组策略,解除操作系统的文件名长度限制(需要重启,以下方式二选一): 在注册表编辑器中创建HKLM\SYSTEM\CurrentControlSet\Control\FileSystem LongPathsEnabled, 类型为REG_DWORD,并设置为1。 或者从系统菜单点击设置图标,输入“编辑组策略”, 然后在打开的窗口依次进入“计算机管理” > “管理模板” > “系统” > “文件系统”,在右侧双击“启用 win32 长路径”。 ———————————————— 版权声明:本文为CSDN博主「徐晓伟」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_32596527/article/details/105799844

[Angular] 使用ngForTrackBy 來提升*ngFor的效能

  詳細文章 https://dotblogs.com.tw/explooosion/2017/04/29/035512 用法 < li * ngFor = "let item of items ; trackBy:trackByFn ; let i=index" > {{i}} - {{ item.name }} </ li > trackByFn(index, item) { return index; // or item.name }

[Angular] 在Angular 12版後,嚴格模式的寫作方式及常見錯誤處理

  https://fullstackladder.dev/blog/2021/06/21/how-to-survive-in-angular-12-strict-mode-using-async-pipe/

[Angular] 在.ts裡面使用pipe的功能

  https://stackoverflow.com/questions/35159079/is-it-possible-to-use-a-pipe-in-the-code First declare the pipe in the  providers  of your module: import { YourPipeComponentName } from 'your_component_path'; @NgModule({ providers: [ YourPipeComponentName ] }) export class YourServiceModule { } Then you can use  @Pipe  in a component like this: import { YourPipeComponentName } from 'your_component_path'; class YourService { constructor(private pipe: YourPipeComponentName) {} YourFunction(value) { this.pipe.transform(value, 'pipeFilter'); } }

[Angular] 將日期格式用內建的DatePipe轉成自定義的string格式

https://stackoverflow.com/questions/40377103/how-to-convert-date-into-this-yyyy-mm-dd-format-in-angular-2 component.ts   constructor (       public datepipe : DatePipe ,   ) {} function(){   // 日期轉換     const ConvertedDate = this . datepipe . transform (       this . myForm . controls . myDate . value ,       ' yyyyMMdd ' ,     ) ; } 其中 'yyyyMMdd' 可以自訂為其他格式 像是 'yyyy/MM/dd' 之類的 就會輸出 2022/08/23 app.module.ts import { DatePipe } from ' @angular/common ' ;   providers : [      DatePipe ,   ] ,