如何在模板驱动的方法中保存没有 ngModel 的数据

Question

我陷入了必须从 Angular UI 将数据保存到数据库的情况。 我正在显示一个表格格式的数据，其中表格数据（表格标题和表格值）根据一些下拉选择而变化。

如果没有定义数据将绑定到的属性的模型，如何将数据保存到数据库中？

我想创建一个模型类并将所有属性保留在其中，以便无论何时在下拉选择中，当我们从数据库中获取数据时，我都可以选择数据并将其绑定到这些属性。 但该信息以百为单位。 创建 100 多个属性可以吗？ 当我们不知道 UI 中会显示多少值时。

例如下拉菜单有 4 个值 A、B、C、D。在选择 A 时，返回 15 行（包括表头和数据），在选择 B 时，30。在选择 C ​​时，50 等。 .

然后这些值以表格格式显示。 （即 15、30、50.. 列，）

为了显示，我使用以下代码：

.ts

async ngOnInit() {
    try {
        this.equipmentTypeInfo = await this.parameterService.getEquipmentTypes().toPromise();
        this.onEquipmentTypeSelectionChange(this.equipmentTypeInfo.length > 0 ? this.equipmentTypeInfo[0] : undefined);

    } catch (error) {
        this.errorService.handlePageError(error);
    }
}    

async onEquipmentTypeSelectionChange(equipment: any) {
    if (this.demoheader.length > 0)
        this.demoheader = [];
    this.solverData = new Map<string, string>();
    //this.clearComponentVariables();
    try {
        if (equipment) {
            this.selectedEquipmentType = equipment;
        }
        this.searchModel.templateUrn = equipment;
        this.searchModel.maxRows = 76;
        this.isLoading = true;
        //this.errorComponent.clearError();
        this.parameterModels = await this.parameterService.getEquipmentTypeSearchResults(equipment).toPromise();


        const groups = this.parameterModels.reduce((groups, param) => {
            groups[param.entityName] = groups[param.entityName] || [];
            groups[param.entityName].push(param);
            return groups;
        }, {});

        //Adding in the Dictionary format
        const groupArrays = Object.keys(groups).map((entityName) => {
            return {
                entityName,
                solverParameterData: groups[entityName]
            };
        });
        for (var i = 0; i < groupArrays.length; ++i) {
            this.solverData.set("Equipment Name", groupArrays[i].entityName);
            groupArrays[i].solverParameterData.forEach(y => {
            //since the column would be same for the data, therefore, getting the first set and then breaking.
                this.solverData.set(y.attributeUrn, y.value);
            });
            break;
        }

        this.groupDataInfo = groupArrays;
        this.solverData.forEach((item, key) => {
            this.demoheader.push(key);
            this.demoValue.push(item);
        });

    } catch (error) {
        this.errorService.handlePageError(error);
    } finally {
        this.isLoading = false;
    }
}  

.html

<table class="tableInfo">
    <thead *ngIf="parameterModels?.length > 0">
        <tr>
            <th class="tableheaders" *ngFor="let paramType of demoheader; let i = index">
                {{paramType}}
            </th>               
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let paramTypes of groupDataInfo; let i = index">
            <td>
                <div class="tabledataEquipmentNameInfo">
                    <input id="entityName" type="text" name="{{paramTypes.entityName}}{{i}}" value="{{paramTypes.entityName}}" class="form-control" disabled>
                </div>
            </td>
            <td *ngFor="let paramType of paramTypes.solverParameterData; let ii = index">
                <div class="tabledataEquipmentNameInfo">
                    <input id="entityName" type="text" name="{{paramTypes.entityName}}{{i}}" value="{{paramType.value}}" class="form-control" disabled>
                </div>
            </td>
        </tr>
    </tbody>

</table>

我能够显示数据。 但是现在出现了一个问题，我将如何保存数据。 我还没有创建任何模型。 此外，可以有超过 1 行，我可以编辑任何行信息。 我们确实有脏属性，但这也适用于模型。 任何实现保存的方法。 或者我必须创建一个模型类然后使用 ngmodel？

Answer 1

最简单的方法是使用 ReactiveForms 或只使用数据模型 - 一组行模型，但既然你想以艰难的方式做到这一点......

您可以将所有内容包装到<form>中并进行普通的旧 HTML 表单提交。

<form action="some/backend/path" method="POST">
   Here goes yours table with inputs - just use correct `name` attribute as now you are duplicatiing them

<button type="submit">DO IT</button>
</form>

如果您需要在提交之前对该表单/数据进行一些处理，您可以随时连接到onsubmit表单。