angular - JHipster 和 Angular - 实时编辑表 - 模板驱动的表单

Question

目标

使用 JHipster 5.0 Angular 6.0

arrayOfArrays[i] 是一个名为 Details 的对象列表。每个 Detail（在 *ngFor 指令中命名为 arrayOfArray）包含一个 id、一个数量和其他对象和属性。我为每个详细信息列表创建了一行，并为每个详细信息创建了一个 td，我想实时编辑此表。更具体地说，我想实时编辑“arrayOfArray.quantite”。反过来，我想将每个 arrayOfArray 及其更新的数量发送回服务器。

我创建的 put 请求方法需要一个 ArrayList of Detail。Detailservice 包含一个 updateDetails 方法，该方法通常将此 ArrayList of Detail 发送到 put 请求方法。这个方法应该是由前面点击调用的方法saveDetails本身调用的。

saveDetails(){
    this.DetailService.updateDetails(this.details);
}

问题

我没有成功从我创建的表单生成 ArrayList，以便能够在 updateDetails(this.details) 中传递它。我认为步骤可能是：

1 - 在 ts 中，我创建了一个空的详细信息：ArrayList。每次我离开 td （使用选项卡或通过单击 => 将 (ngOnSubmit) 替换为其他内容？但是什么？）时，激活的方法将获取详细信息和更新的数量并将其推送到数组中。

2 - 然后单击保存按钮会将 detauksArrayList 传递给方法 updateDetails。

这是我的 HTML 代码：

 <div class="table-responsive" *ngIf="map">
    <table class="table table-striped table-bordered" *ngIf="arrayOfArrays">
        <thead>
        <tr>
            <th> Type Mission </th>
            <th *ngFor="let arrayOfArray of arrayOfArrays[0] ;trackBy: 
trackId;"> {{arrayOfArray.jourDuMois  | date:'EEEEE d'}} </th>
        </tr>
        </thead>
        <tbody>

        <tr  *ngFor="let keyOfMap of keysOfMap ;trackBy: trackId; let i= 
index" >
                <td> {{keyOfMap}} </td>
                <td *ngFor="let arrayOfArray of arrayOfArrays[i] ;trackBy: 
trackId; let f = index "  >
                    <form name="detailsForm" role="form" 
(ngSubmit)="onSubmitForm()">
                    <input class = "form-control-plaintext" name="quantite" 
id="quantite"[(ngModel)]="arrayOfArray.quantite">
                    </form>
                </td>
        </tr>

        </tbody>
    </table>
 <button class="btn btn-primary" (click)="saveDetails()"> <fa-icon 
[icon]="'save'"></fa-icon> Sauver </button>
</div>

另一种方法是为每个详细信息列表创建一个表单，但我无法使其正确显示在前面。

另外，在 JHipster 中，我没有在更新组件中看到 formBuilder 和 formGroup 注释（正如我们通常在 Angular 中看到的那样）。他们在哪里？由于没有在相应的 ts 中声明或初始化，ts 如何知道在 html 中获取哪种形式？

请问你能帮帮我吗？

谢谢

标签： angularjhipster