我正在接管以前成員的代碼，該代碼與此處提供的示例 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*/雖然這個設定不是很好，但它很好，因為它實際上允許以毫秒為單位將輸出發送到服務器屬性，但是，即使 HTML 代碼顯示 value=180000 而不是整數，它也會將輸出作為字串而不是整數發送值="180000"。顯示字串型別的影像。
我正在嘗試將此當前設定作為整數輸出，或者將其更改為文本輸入（我已經能夠做到并且它可以作業，但僅在毫秒內），它會在幾分鐘內顯示，然后轉換為小姐。
從昨天到今天，我已經嘗試了近 8 個小時，但我沒有運氣查看互聯網上的其他 stackoverflow 帖子和其他資源，例如angular 的檔案。
如果有人能夠幫助我，那將不勝感激。
uj5u.com熱心網友回復：
如果你想用數字代替字串，你應該在 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([]);
}
}
只需將此代碼添加到自定義小部件操作。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/496147.html
標籤：javascript html angularjs 角材料 东西板