發表文章

目前顯示的是 1月, 2023的文章

[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 ; }