angular - Angular 6 - 为从另一个数组中检索的数组本身检索的每个对象创建不同的输入

问题描述

目标

使用 Jhipster v5.0.1 和 Angular v6.0.0

为列表中存在的每个对象创建一个输入，以便我可以正确显示它并在服务器中检索它。

尝试

 <div class="table-responsive" *ngIf="map">

        <form name="editForm" role="form" #editForm="ngForm" id="editForm">
        <table class="table table-striped table-bordered" *ngIf="arrayOfArrays">

            <thead>
            <tr>
                <th> Type Mission </th>
                <th *ngFor="let arrayOfArray of arrayOfArrays[0]"> {{arrayOfArray.jourDuMois  | date:'EEEEE d'}} </th>
            </tr>
            </thead>

            <tbody>
                <tr  *ngFor="let keyOfMap of keysOfMap ; let i= index" >
                    <td> {{keyOfMap}} </td>
                    <td *ngFor="let arrayOfArray of arrayOfArrays[i] ; let f = index "  >
                        <input class = "form-control-plaintext" name="quantite" [(ngModel)]="arrayOfArray.quantite" required pattern="(0|0.5|1)">
                        <div [hidden]="!(editForm.controls.quantite?.invalid)">
                            <small class="form-text text-danger"
                                   [hidden]="!editForm.controls.quantite?.errors?.required">
                                Le champ est requis.
                            </small>
                            <small class="form-text text-danger"
                                   [hidden]="!editForm.controls.quantite?.errors?.pattern">
                                Valeurs acceptées: 0, 0.5 ou 1
                            </small>
                        </div>
                    </td>
                </tr>
            </tbody>

        </table>

        <button class="btn btn-primary" (click)="saveDetailsForCra()" [disabled]="editForm.form.invalid || isSaving"> <fa-icon [icon]="'save'"></fa-icon> Sauver </button>
        </form>

    </div>

问题

我找不到这样做的方法。

编辑编辑编辑

为每个对象使用特定名称，它可以工作：

 <input class = "form-control-plaintext" name="quantite{{i}}{{f}}" [(ngModel)]="arrayOfArray.quantite" required pattern="(0|0.5|1)">

但是，无论发生什么，errorMessages 都会隐藏起来。“逻辑”它不是正确的名称：

<div [hidden]="!(editForm.controls.quantite?.invalid)">

但是，如果我输入具体名称：

<div [hidden]="!(editForm.controls.quantite{{i}}{{f}}?.invalid)">

我收到一条错误消息：

解析器错误：在 [!(editForm.controls.quantite{{i}}{{f}}?.invalid)] 的第 28 列预期表达式出现插值 ({{}})

请问你能帮帮我吗？

谢谢！

标签： angular

angular - Angular 6 - 为从另一个数组中检索的数组本身检索的每个对象创建不同的输入

问题描述

解决方案

推荐阅读