Я пытаюсь сделать такую форму.
https://ibb.co/pyChmz4
Всякий раз, когда я хочу добавить новый элемент, который можно редактировать позже, в форме ввода появляется выше, все количество элементов устанавливается на то же число, что и в последнем добавленном. Хотя они разные, как можно видеть в JSON.
Код выглядит следующим образом.
«OrderItems» поставляется компонентом.
Где я делаю не так?
<div class="h-100 v-100 border rounded" style="background-color:#FFEBEE">
<p class="text-black-50 m-2 font-weight-bolder">items to be added</p>
<div class="item-flex-container m-2 p-2" name="orderItemList" *ngFor="let orderitem of orderItems">
<mat-form-field class="col-6">
<mat-select placeholder="Item description" name="item" [(value)]="orderitem.item.id" (selectionChange)="changeItem(orderitem)">
<mat-option *ngFor="let item of items" [value]="item.id" name="itemid">{{item.description}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="input-number">
<input matInput placeholder="number of items" name="numberofItem" type="number" [(ngModel)]="orderitem.number">
</mat-form-field>
<div class="add-button">
<a style="font-size: 15px; font-weight: 200;" color="warn" mat-mini-fab matTooltip="change"><i class="fa fa-ellipsis-v"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="item-flex-container m-2 mt-5">
<mat-form-field class="col-6">
<mat-select name="item" placeholder="Item description" [(ngModel)]="form.itemid">
<mat-option *ngFor="let item of items" value="{{item.id}}" name="item">{{item.description}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="input-number">
<input matInput placeholder="number of items" type="number" name="numberItemAdd" [(ngModel)]="form.numberItemAdd">
</mat-form-field>
<div class="add-button">
<a style="font-size: 30px; font-weight: 500;" color="warn" (click)="add(form.itemid)" mat-mini-fab
matTooltip="Add new Item">+
</a>
</div>