Question

我现在有一个问题，我的带有材质嵌套树的动态过滤器无法区分节点级别。

我的代码如下：

<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>
<div class="dynamic-filter-button">
  <button mat-button color="primary" (click)="saveData()">Save</button>
  <button mat-button color="primary" (click)="closeDialog()">Cancel</button>
</div>

在此html中，您可以看到有一个selct，在此选择中您可以选择其他运算符，最后一个位置有add按钮，使用此按钮，您可以添加一个具有selct和添加按钮等。

如果我选择一个运算符（即“ AND”），则不应显示输入字段，而对于其他运算符，则应显示输入字段。

问题是：如果我在子节点select中选择了一个运算符，则父节点也被更改，在这种情况下，即使父选择为“ And”运算符，也会显示输入字段。

也许您有任何想法吗？

如何在材料嵌套树中区分节点级别

0 个答案: