如何通过添加新节点来更新动态树视图，并且旧的已创建节点状态不会更改

Question

任何人都可以给我一些建议或解决方案吗？ 我用角度材料实现了动态视图树。该动态视图树可以添加或删除新行作为子节点。

现在我有一个问题，如果添加新行，其他已创建节点的状态也将更改，这不是我期望的。

代码如下：

set

和.ts代码：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="dynamic-filter-tree" #treeSelector>
  <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button
                matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.field"
                *ngIf="node.predicates.length>0">
          <mat-icon class="mat-icon-rtl-mirror">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        <mat-form-field class="dynamic-filter-operator">

          <mat-select placeholder="Operator"
                      [(ngModel)]="node.op"
                      name="matSelect">
            <ng-container *ngFor="let operator of operators">
              <mat-option [value]="operator.key">
                {{operator.value}}
              </mat-option>
            </ng-container>
          </mat-select>

        </mat-form-field>
        <span style="padding-left: 10px"></span>
        <div *ngIf="node.op !== operatorConstants.AND && node.op !== operatorConstants.OR">
          <mat-form-field appearance="legacy">
            <input matInput type="text" [formControl]="locationField" [(ngModel)]="node.field" name="node" [matAutocomplete]="auto" placeholder="Field"/>
            <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let filteredFieldResult of locationFieldResults" [value]="filteredFieldResult">
                {{filteredFieldResult}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </div>
        <div class="dynamic-filter-add-delete-button">
          <button
            mat-icon-button
            (click)="addNewItem(node)">
            <mat-icon>add</mat-icon>
          </button>
          <button *ngIf="node.predicates.length ===0 && node.level!==0 "
                  mat-icon-button
                  (click)="remove(node)"
                  class="dynamic-filter-delete-button">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </div>
      <ul [class.dynamic-filter-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

我认为renderChanges（）函数无法正常工作，但是我没有找到更好的解决方案。

也许您有任何建议？