как сохранить статус родительского узла, если статус дочернего узла изменился при просмотре дерева угловых материалов - PullRequest
Новая
       15

как сохранить статус родительского узла, если статус дочернего узла изменился при просмотре дерева угловых материалов

0 голосов
/ 06 ноября 2019

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

Я покажу свой код следующим образом: 

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="dynamic-filter-tree" #treeSelector>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.field">
          <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.predicates.length>0">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        <mat-select placeholder="Operator"
                    [(ngModel)]="node.op"
                    name="matSelect"
                    (selectionChange)="selectChanged($event.value)">
          <mat-option *ngFor="let operator of operators;let i=index" [value]="operator">
            {{operator}}
          </mat-option>
        </mat-select>
        <mat-form-field appearance="legacy" *ngIf="node.level === 0 ">
          <input matInput type="text" [(ngModel)]="node.field" name="node" placeholder="Field"/>
        </mat-form-field>
        <span style="padding-left: 10px"></span>
        <mat-form-field appearance="legacy" *ngIf="node.level === 0 ? (isPredicate ? false: true) : true">
          <input matInput type="text" [(ngModel)]="node.value" name="node" placeholder="value"/>
        </mat-form-field>
        <button *ngIf=" node.level === 0 || node.level === 1 && node.op === 'OR'"
                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)">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <ul [class.dynamic-filter-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

из кода, который вы видите, есть выбор в виде дерева, если я выберу вариант выбора, либо поле ввода будетпоказано или нет.

но теперь проблема в том, что если я выберу опцию из select, которая находится в дочернем узле, статус поля ввода от родительского узла также изменяется, что означает, что поле ввода будет отображаться или нет.

может быть, у вас есть идеи?

...