2

我研究过高级树视图：

经过一些更改后，我尝试限制选择数量。但是，我遇到了几个问题。我可以限制我的选择，但是当超过限制时我不能取消选中复选框。

这是我的工作：

<div class="container-fluid d-flex flex-column">
    <ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand"
        let-onCheckedChange="onCheckedChange">
        <div class="form-inline row-item">
            <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa"
                [class.fa-caret-right]="item.collapsed" [class.fa-caret-down]="!item.collapsed"></i>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked"
                    (ngModelChange)="onCheckedChange();" [disabled]="item.disabled"
                    [indeterminate]="item.indeterminate" />
                <label class="form-check-label" (click)="onCheckedChange();selectItem(item)">
                    {{item.text}} {{item.checked}}
                </label>
            </div>
        </div>
    </ng-template>
    <div class="row d-flex flex-grow-1 of-auto">
        <div class="col-3 d-flex flex-column">
            <div class="form-group">
                <ngx-treeview [config]="config" [items]="items" [itemTemplate]="itemTemplate"
                    (selectedChange)="onSelectedChange($event)">
                </ngx-treeview>
            </div>
        </div>
    </div>
</div>

这是组成部分：

onSelectedChange(downlineItems: DownlineTreeviewItem[]) {
    this.selectedItems = [];
    downlineItems.forEach(downlineItem => {
      const item = downlineItem.item;
      this.selectedItems.push(item.value);
      this.selectItem(item);
    });
}

selectItem(item) {
    if (this.selectedItems.length > 2) {
      this.selectedItems.pop();
      item.checked = false;
    }
}

我检查了 html 部分中的真/假值，它工作正常。仍然选中复选框。我还需要一些父母选择方面的帮助。当超过选择限制时，父选择变为真，直到选择了该父项的其中一个子项。

你对这个问题有什么解决方案吗？

4

0 回答 0