JHipster и Angular - таблица редактирования в реальном времени - управляемая шаблоном форма

Question

Цель

Использование JHipster 5.0 Angular 6.0

arrayOfArrays [i] - это список объектов с именем Details.Каждая деталь (с именем arrayOfArray в директиве * ngFor) содержит идентификатор, количество и другие объекты и свойства.Я создал строку для каждого списка деталей и тд для каждой детали, и я хотел бы в режиме реального времени редактировать эту таблицу.Более конкретно, я хотел бы вживую отредактировать «arrayOfArray.quantite».В свою очередь, я хотел бы отправить обратно каждый массивOfArray с его обновленным количеством на сервер.

Созданный мной метод запроса put требует ArrayList of Detail.Detailservice содержит метод updateDetails, который обычно отправляет этот ArrayList of Detail методу запроса put.Предполагается, что этот метод вызывается самим методом saveDetails, вызываемым щелчком впереди.

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

Issue

Мне не удается сгенерировать ArrayList из формы, которую я создал, чтобы иметь возможность передать ее в updateDetails (this.details).Я думал, что шаги могут быть:

1 - В TS, я создаю пустые детали: ArrayList.Каждый раз, когда я оставляю td (с помощью tab или click =>, заменяя (ngOnSubmit) чем-то другим? Но что?), Активированный метод собирает Detail вместе с обновленным количеством и помещает его в массив.

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?

Не могли бы вы мне помочь, пожалуйста?

Спасибо