при динамическом добавлении нескольких mat-accodion одинаковые значения отсутствуют на предыдущей вкладке

Question

Я добавил или выбрал из раскрывающегося списка, используя ngbTypeahead, и когда я нажимаю кнопку добавления продукта, выбранное мной значение исчезает и показывает пустой ввод. Но в файле машинописного текста значение сохраняется правильно, поэтому я отправляю эти данные на сервер. Очевидно, я выбрал продукт в поле поиска и нажал кнопку добавления продукта. Потом значение исчезло.

Проблема

Когда я добавляю кнопку add product, выбранное мной значение исчезает.

ts файл

addProductClicked(index, e) { 

        this.productListSendingToServer[index + 1] = JSON.parse(
            JSON.stringify(this.productPackageModel)
        );
        this.productCollapseIndex = index + 1; 
        e.stopPropagation();

 }

 productPackageModel = {
        productType: {
            Id: null,
            Name: null,
            Code: null,
            productCategory: {
                ProductCategoryId: null,
                Name: "",
                IsDefault: null,
                ClienteleId: null,
            },
        },

    };

html файл

<div
    *ngFor=" let item of productListSendingToServer; let i = index "
    class="collapseGroup"
>
    <mat-accordion>
        <mat-expansion-panel
            [expanded]=" productListSendingToServer.length == i + 1 "
        >
            <mat-expansion-panel-header>
                <mat-panel-title>
                    <strong>Product {{ i + 1 }}</strong>
                </mat-panel-title>
                <div class="btn-group FloatRightAndRadius" role="group">
                    <button
                        type="button"
                        class="btn btn-xs btn-info extraSmallButton"
                        (click)="
                                                    addProductClicked(i, $event)
                                                "
                        *ngIf="
                                                    productListSendingToServer.length ==
                                                    i + 1
                                                "
                    >
                        <span class="glyphicon glyphicon-plus"></span>
                        Add Product

                    </button>
                    <!-- <button
                                                type="button"
                                                class="btn btn-xs btn-success extraSmallButton"
                                                (click)="
                                                    saveProductClicked(i, $event)
                                                "
                                                *ngIf="
                                                    productListSendingToServer.length >
                                                    1
                                                "
                                            ><span
                                                    class="glyphicon glyphicon-plus"
                                                ></span>
                                                Save
                                            </button> -->
                    <button
                        type="button"
                        class="btn btn-xs btn-danger"
                        aria-label="Close"
                        (click)="
                                                    deleteProductClicked(
                                                        i,
                                                        $event
                                                    )
                                                "
                        *ngIf="
                                                    productListSendingToServer.length >
                                                    1
                                                "
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </mat-expansion-panel-header>
            <div class="kt-form__section kt-form__section--first">
                <div class="kt-wizard-v2__form">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xl-6">
                                <label for="productdetailproduct">Search Product</label>
                                <input
                                    id="productdetailproduct"
                                    name="productdetailproduct"
                                    (selectItem)=" productChanged(  i, $event ) "
                                    [(ngModel)]=" item.productType  "
                                    type="text"
                                    class="form-control"
                                    [resultFormatter]="     ngbformatter "
                                    [inputFormatter]=" ngbformatter "
                                    [ngbTypeahead]="    ngbProductSearch"

                                />
                            </div>
                            <div class="col-xl-6">
                                <div class="form-group">
                                    <label for="productdetailproductcategory">Product Category</label>
                                    <input
                                        disabled="productCategoryLabel !== null && productCategoryLabel !==''"
                                        type="text"
                                        class="form-control"
                                        id="productdetailproductcategory"
                                        [ngModel]="item.productCategoryLabel "
                                        name="productdetailproductcategory"
                                        placeholder="Product Category"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </mat-expansion-panel>
    </mat-accordion>
</div>

снимок экрана