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

Question

我陷入了必须将数据保存到Angular UI到数据库的情况。我正在显示表格数据（表标头和表值）根据某些下拉选择更改的表格格式数据。

如果没有一个模型，该模型被定义了将数据绑定到的属性，那么一个人如何将数据保存到数据库中？

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

例如，下拉列表具有4个值A，B，C，D。在选择A，15行（包括表标头和数据）时，返回了B，30。选择C，50，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

简单的方法是使用反应性形式，或者只是具有数据模型 - 一系列行模型，但是由于您想以困难的方式进行。...

您可以将所有内容包装到＆lt; form＆gt; 并执行普通的旧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表单中。