Question

目标

使用JHipster 5.0 Angular 6.0

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

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

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

问题

我无法从我创建的窗体中成功生成ArrayList，以便能够在updateDetails（this.details）中传递它。我认为这些步骤可以是：

1-在ts中，我创建了一个空的详细信息：ArrayList。每次我留下一个td时（使用制表符或通过单击=>并用其他东西替换（ngOnSubmit）来代替？但是呢？），激活的方法将把Detail和更新的数量放在一起并将其推入Array。

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中声明或初始化html，ts如何知道要在html中获取哪种形式？

可以帮我吗？

谢谢

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

0 个答案: