主页 / coding / 问题 / 79431066
Accepted
S.Kruse at WAGO
Asked: 2025-02-12 02:55:08 +0800 CST

以十六进制格式显示/编辑数字

  • 772

Angular 中是否有内置方法可以将模型中的数字类型用作 HTML 中的十六进制值进行显示和编辑？我的模型中有这种类型：

bitmask: number = 0;

现在应该在前端显示为十六进制值。

<td *ngIf="!isEditing">{{parameter.bitmask}}</td>
<td *ngIf="isEditing"><input type="text" [(ngModel)]="parameter.bitmask" maxlength="2" pattern="^(0-9a-fA-F)$" /></td>

任何提示或帮助都将不胜感激。我已经尝试使用模型中的属性，如下所示：

get hexBitmask(): string {
    return this.bitmask.toString(16);
}

set hexBitmask(value: string) {
    if (!value.startsWith('0x')) {
        value = "0x".concat(value);
    }       
        
    this.bitmask = Number(value);
}

但似乎我无法像使用位掩码字段那样在前端的绑定中使用它。

angular

1 个回答

  1. Best Answer

    作为展示的选项，您可以使用自定义管道：

    import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipe',
  standalone: true
})
export class CustomPipe implements PipeTransform {

  transform(value: number): string[] {
    return this.bitmask.toString(16);
  }
}

    在 html 中你将获得以下内容：

    <td *ngIf="!isEditing">{{parameter.bitmask | customPipe}}</td>

    对于输入数据，您没有描述带有“0x”或不带有“0x”的格式。

    • 0

相关问题