fix: add null safety and type guard for ErrorDialogComponent data
fix:logic fix: Handles all data types gracefully improve the typeScript Component
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<h1 mat-dialog-title>{{ 'Error Log' | translate }}</h1>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<p *ngIf="!showAsCode">{{ data }}</p>
|
||||
<span *ngIf="showAsCode" [innerHTML]="data"></span>
|
||||
<p *ngIf="!showAsCode">{{ displayData }}</p>
|
||||
<span *ngIf="showAsCode" [innerHTML]="sanitizedData"></span>
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions align="left">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports. */
|
||||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { Component, OnInit, Inject, SecurityContext } from '@angular/core';
|
||||
import {
|
||||
MatDialogRef,
|
||||
MAT_DIALOG_DATA,
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
MatDialogClose
|
||||
} from '@angular/material/dialog';
|
||||
import { CdkScrollable } from '@angular/cdk/scrolling';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
@Component({
|
||||
@@ -28,12 +29,35 @@ export class ErrorDialogComponent {
|
||||
showAsCode = false;
|
||||
/**
|
||||
* @param {MatDialogRef} dialogRef Component reference to dialog.
|
||||
* @param {any} data Provides any data.
|
||||
* @param {unknown} data Provides any data.
|
||||
* @param {DomSanitizer} sanitizer Service to sanitize HTML content.
|
||||
*/
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ErrorDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: string
|
||||
@Inject(MAT_DIALOG_DATA) public data: unknown,
|
||||
private sanitizer: DomSanitizer
|
||||
) {
|
||||
this.showAsCode = data.startsWith('<pre><code>');
|
||||
// Guard for non-string data to avoid runtime error
|
||||
this.showAsCode = typeof data === 'string' && data.startsWith('<pre><code>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get display data with proper type safety for template usage.
|
||||
* @returns {string} Safe string representation of the data.
|
||||
*/
|
||||
get displayData(): string {
|
||||
if (typeof this.data === 'string') {
|
||||
return this.data;
|
||||
}
|
||||
// Convert non-string data to string representation for display
|
||||
return this.data != null ? JSON.stringify(this.data) : '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get sanitized HTML content for safe rendering.
|
||||
* @returns {SafeHtml} Sanitized HTML content.
|
||||
*/
|
||||
get sanitizedData(): SafeHtml {
|
||||
return this.sanitizer.sanitize(SecurityContext.HTML, this.displayData) || '';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user