ThingsBoard部件-从毫秒到分钟的转换
ThingsBoard部件-从毫秒到分钟的转换
提问于 2022-06-16 18:51:11
我正在接管以前成员的代码，它非常类似于示例HTML代码和js函数，为这里提供了一些小的更改。
打开小部件时，我可以更改网关的一些属性(例如。高优先级布尔值，或非活动超时)。这个小部件在ms中花费时间，人们在进入时看起来很困惑，所以前一个成员创建了一些固定的时间，与ms中的时间有关，请参阅图像以获取可视信息。下拉菜单的示例图像。用于此的HTML代码是(我在不需要时为其他字段编辑了部分内容)：
<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
(ngSubmit)="save()" class="edit-entity-form">
<div formGroupName="attributes" fxLayout="column" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<mat-label>Disconnection Timeout</mat-label>
<mat-select matInput formControlName="inactivityTimeout">
<mat-option value=1800000>30 min</mat-option>
<mat-option value=3600000>60 min</mat-option>
<mat-option value=7200000>120 min</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</form>
相应的javascript函数(据我所知)是：
function EditEntityDialogController(instance) {
let vm = instance;
vm.entityName = entityName;
vm.entityType = entityId.entityType;
vm.entitySearchDirection = {
to: "TO"
};
vm.attributes = {};
vm.oldRelationsData = [];
vm.relationsToDelete = [];
vm.entity = {};
vm.editEntityFormGroup = vm.fb.group({
entityName: ['', [vm.validators.required]],
entityType: [null],
entityLabel: [null],
type: ['', [vm.validators.required]],
attributes: vm.fb.group({
inactivityTimeout: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
}),
oldRelations: vm.fb.array([]),
relations: vm.fb.array([])
});
/*This function goes on but it is just a bunch of inner functions like
.save or .cancel*/
虽然这个设置不是很好，但它很好，因为它实际上允许以ms格式将输出发送到服务器属性，但是，它将输出作为字符串而不是整数发送，尽管value=代码中写的是value="180000“。显示字符串类型的图像。
我正在尝试将当前的设置作为整数输出，或者将其更改为文本输入(我已经能够这样做了，但只在ms中)，该输入在几分钟内显示，然后转换为ms。
从昨天到今天，我尝试了近8个小时，但我没有运气看到其他堆叠溢出的帖子和互联网上的其他资源，如角文献。
如果有人能帮助我，那将是非常感谢的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-17 08:56:28
如果要使用值号代替字符串，则应在mat-选项中添加“value”：
<mat-select matInput formControlName="inactivityTimeout">
<mat-option [value]=1800000>30 min</mat-option>
<mat-option [value]=3600000>60 min</mat-option>
<mat-option [value]=7200000>120 min</mat-option>
</mat-select>下面是一个包含文本输入和发送数字的选择器的简短示例：
HTML
<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
(ngSubmit)="save()" class="edit-entity-form">
<mat-toolbar fxLayout="row" color="primary">
<h2>Edit test value</h2>
<span fxFlex></span>
<button mat-icon-button (click)="cancel()" type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<mat-label>Input Test</mat-label>
<input type="number" step="any" matInput formControlName="inputTest">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label>Selector Test</mat-label>
<mat-select matInput formControlName="selectorTest">
<mat-option [value]=1800000>30 min</mat-option>
<mat-option [value]=3600000>60 min</mat-option>
<mat-option [value]=7200000>120 min</mat-option>
</mat-select>
</mat-form-field>
</div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial>
Cancel
</button>
<button mat-button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">
Save
</button>
</div>联署材料：
let $injector = widgetContext.$scope.$injector;
let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
openEditEntityDialog();
function openEditEntityDialog() {
customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();
}
function EditEntityDialogController(instance) {
let vm = instance;
vm.attributes = {};
vm.editEntityFormGroup = vm.fb.group({
inputTest: [null],
selectorTest: [null]
});
getEntityInfo();
vm.cancel = function() {
vm.dialogRef.close(null);
};
vm.save = function() {
vm.editEntityFormGroup.markAsPristine();
widgetContext.rxjs.forkJoin([
saveAttributes(entityId),
]).subscribe(
function () {
widgetContext.updateAliases();
vm.dialogRef.close(null);
}
);
};
function getEntityAttributes(attributes) {
for (var i = 0; i < attributes.length; i++) {
vm.attributes[attributes[i].key] = attributes[i].value;
}
}
function getEntityInfo() {
attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',['inputTest','selectorTest']).subscribe(
function (data) {
getEntityAttributes(data);
vm.editEntityFormGroup.patchValue({
inputTest: vm.attributes.inputTest,
selectorTest: vm.attributes.selectorTest
}, {emitEvent: false});
}
);
}
function saveAttributes(entityId) {
let attributes = vm.editEntityFormGroup.value;
let attributesArray = [];
for (let key in attributes) {
if (attributes[key] !== vm.attributes[key]) {
attributesArray.push({key: key, value: attributes[key]});
}
}
if (attributesArray.length > 0) {
return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
}
return widgetContext.rxjs.of([]);
}
}只需将此代码添加到自定义小部件操作中即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72650633
复制相关文章
相似问题
腾讯云开发者
