Использование Angular 9 - Ошибка при использовании ngModel с моделью для построения динамической c формы; Переменные шаблона доступны только для чтения

Question

Я относительно новичок в Angular. Я скрывался здесь годами, черпая из коллективного удивления. На этот раз я не могу найти ответ.

Я использую массив объектов для управления элементом treeNode. Я хочу выполнить двустороннюю привязку к излучаемым элементам и обновить резервный массив. Я реализовал «обходной путь», отправив значения в отдельный объект, но двусторонняя привязка и здесь не работает. Я хочу убедиться, что нет лучшего способа.

Данные - это массив объектов:

[
  {
      "SKU": "1-I1GGF1",
      "Platform": "Linux",
      "Description": "Linux",
      "KeyWord": "Linux",
      "MemClass": null,
      "MemGB": null,
      "CPUClass": "Small",
      "CPUs": 2,
      "UnitTime": "Month",
      "UnitName": "Each",
      "UnitListPrice": 200,
      "Discount": 0.10,
      "UnitCost": 180
  },
  {
      "SKU": "1-IGGF02",
      "Platform": "Linux",
      "Description": "Linux",
      "KeyWord": "Linux",
      "MemClass": null,
      "MemGB": null,
      "CPUClass": "Medium",
      "CPUs": 4,
      "UnitTime": "Month",
      "UnitName": "Each",
      "UnitListPrice": 280,
      "Discount": 0.10,
      "UnitCost": 98
  },
  {
      "SKU": "1-IGGF03",
      "Platform": "Linux",
      "Description": "Linux",
      "KeyWord": "Linux",
      "MemClass": null,
      "MemGB": null,
      "CPUClass": "Large",
      "CPUs": 8,
      "UnitTime": "Month",
      "UnitName": "Each",
      "UnitListPrice": 504,
      "Discount": 0.65,
      "UnitCost": 176.4
  },
  {
    "SKU": "1-IGGF19",
    "Platform": "Windows",
    "Description": "Windows Server  Datacenter (64-bit)",
    "KeyWord": "Windows Server ",
    "MemClass": "Small",
    "MemGB": 4,
    "CPUClass": null,
    "CPUs": null,
    "UnitTime": "Month",
    "UnitName": "Each",
    "UnitListPrice": 55,
    "Discount": 0.65,
    "UnitCost": 19.25
}
]

Шаблон:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="naspo-tree">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
        <div class="nodeInfoContainer">
            <div>
                {{ node.Description }} - {{ node.CPUClass }}
            </div>
            <div class="itemPricing">
                List price: {{ node.UnitListPrice | currency }} {{ node.UnitName }} {{ node.UnitTime }}
            </div>
        </div>
        <div class="calcEntry">
            <div class="calcEntry">
                <mat-form-field class="example-form-field">
                    <mat-label>Clearable input</mat-label>
                    <input matInput type="text" [(ngModel)]="node"]>
                    <button mat-button *ngIf="node.value" matSuffix mat-icon-button aria-label="Clear"
                        (click)="node.value = null">
                        <mat-icon>close</mat-icon>
                    </button>
                </mat-form-field>
            </div>
        </div>

    </li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes-->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <li>
        <div class="mat-tree-node">
            <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle tree node ' + node.Platform">
                <mat-icon class="mat-icon-rtl-mirror">
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
            </button>
            {{node.Platform}}
        </div>
        <ul [class.naspo-tree-invisible]="!treeControl.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
        </ul>
    </li>
</mat-nested-tree-node>

Ошибка:

 error NG8005: Cannot use variable 'node' as the left-hand side of an assignment expression. Template variables are read-only. <input matInput type="text" [(ngModel)]="node"]>

Я понимаю, что ему не нравится, что источник данных используется в качестве источника привязки. Но как это сделать правильно? Массив объекта приводится к типу, который расширил то, что показано выше, чтобы включить количество et c. и я хочу иметь входные данные в шаблоне, который привязывается к объекту, который его строит, поэтому у меня есть один объект с элементами и отредактированной информацией.

Есть ли способ привязать к массиву элементов с помощью динамического c шаблон?

Спасибо за рассмотрение и руководство!

* отредактировано для Engli sh ...