东西板小部件 - 毫秒到微小的转换

Question

我正在接管以前的成员代码，该代码与示例html代码非常相似，并且提供了JS函数在这里有一些小更改。

当我打开小部件时，我可以更改有关网关的一些属性（例如高优先级布尔值或无活动超时）。该小部件在MS中需要时间，在进入时看起来令人困惑，因此以前的成员创建了一些设定的时间，与MS中的时代有关，请参见Visual Image。 下拉菜单的示例图像。 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中的服务器属性，但是，即使HTML代码表示值= 180000，它也将其作为字符串而不是整数发送。值=“ 180000”。 显示字符串类型的图像。

我正在尝试将此当前设置作为整数输出， ，或将其更改为文本输入（我能够做到并且它有效，但仅在MS中）显示在几分钟内显示但然后将其转换为MS。

在昨天和今天之间，我已经尝试了将近8个小时，但是我没有运气来查看互联网上的其他stackoverflow帖子和其他资源，例如 Angular的文档。

如果有人能帮助我，那将不胜感激。

Answer 1

如果要使用值编号的字符串，则应将[]添加到Mat-Option中的'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>

js：

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([]);
    }
}

只需将此代码添加到自定义窗口行动。