自定义垫选择下拉菜单以允许角度嵌套值

Question

我正在自定义角度材料选择/自动完成以允许嵌套下拉菜单。

在这里，我想要一个包含许多孩子的父下拉列表。如果我展开特定的父下拉列表，则只有该下拉列表的子项应该展开或折叠。同理，checkbox事件应该在同一个场景中被选中。

在这里，当我选择下拉列表时，我得到了 [object object]。

提供控制台日志以给出选择/未选择的值。

有人可以帮忙吗？

STACKBLITZ

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>

  <input type="text" matInput placeholder="Select Users" aria-label="Select Users" matInput [matAutocomplete]="auto" [formControl]="states">
  <mat-autocomplete #auto="matAutocomplete">

    <mat-select-trigger>
      {{states.value ? states.value[0] : ''}}
      <span *ngIf="states.value?.length > 1" class="example-additional-selection">
            (+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
          </span>
    </mat-select-trigger>

    <mat-optgroup *ngFor="let group of stateList">
      <div>
        <mat-checkbox [checked]="group.selected" (change)="toggleParent($event, group)" (click)="$event.stopPropagation()">
          {{group.letter}}
        </mat-checkbox>
        <button mat-button (click)="expandDocumentTypes(group)">
                <mat-icon>keyboard_arrow_down</mat-icon>
              </button>
      </div>
      <mat-option *ngFor="let name of group.names" [value]="name" [ngClass]="isExpandCategory[group.letter] ? 'list-show' : 'list-hide'">
        <mat-checkbox [checked]="group.checked" (change)="toggleSelection($event, name, group)" (click)="$event.stopPropagation()">
          {{name}}
        </mat-checkbox>
      </mat-option>
    </mat-optgroup>

  </mat-autocomplete>
</mat-form-field>



 
export class SelectCustomTriggerExample {
  constructor(private _formBuilder: FormBuilder) {}

  // stateForm: FormGroup = this._formBuilder.group({
  //   stateGroup: '',
  // });
  // toppings = new FormControl();
  isExpandCategory: boolean[] = [];
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  stateRecord: any = [];
  states = new FormControl();

  expandDocumentTypes(group: any) {
    console.log("expanding dropdown", group);
    this.isExpandCategory[group.letter] = !this.isExpandCategory[group.letter];
    // expand only selected parent dropdown category with that childs
  }

  toggleSelection(event: any, name: any, group: any) {
    debugger;
    console.log("toggleSelection", name, event.checked, group);
    if (event.checked) {
      console.log("stastateRecordtelist", this.stateRecord);
      this.stateRecord.push(name);
      this.states.setValue(this.stateRecord);
      console.log("toggleselection ", this.states.value);
    } else {
      this.stateRecord = this.stateRecord.filter((x: any) => x !== name);
      console.log("else toggleselection", name, group, this.states.value);
      this.states.setValue(this.states.value.filter((x: any) => x !== name));
      console.log("after filter ", this.states.value);
      //this.states.setValue([]);
    }
  }

  toggleParent(event: any, group: any) {
    debugger;
    group.checked = event.checked;
    console.log("event", event.checked, "group", group, "states value", this.states.value);
    let states = this.states.value;
    states = states ? states : [];
    if (event.checked) {
      states.push(...group.names)
    } else {
      console.log("else", states);
      group.names.forEach((x: string) => {
        if (states.indexOf(x) > -1) {
          states.splice(states.indexOf(x), 1)
        }
      });
    }
    this.states.setValue(states);
    console.log("statesvalue", this.states.value);
    if (!event.checked) {
      this.states.setValue(this.states.value.filter((x: any) => !x.includes(group.names)))
      //this.states.setValue([]);
    }
    console.log("final statesvalue", this.states.value);
  }

  stateList = [{
      "letter": "A",
      "checked": false,
      "names": [{
          "id": 1,
          "type": "Alabama"
        },
        {
          "id": 2,
          "type": "Alaska"
        },
        {
          "id": 3,
          "type": "Arizona"
        },
        {
          "id": 4,
          "type": "Arkansas"
        }
      ]
    },
    {
      "letter": "C",
      "checked": false,
      "names": [{
          "id": 8,
          "type": "California"
        },
        {
          "id": 9,
          "type": "Colorado"
        },
        {
          "id": 10,
          "type": "Connecticut"
        }
      ]
    },
    {
      "letter": "D",
      "checked": false,
      "names": [{
          "id": 18,
          "type": "Delaware"
        },
        {
          "id": 19,
          "type": "Denwer"
        }
      ]
    }
  ];
}

预期输出应如下所示

Answer 1

用下面给出的替换你的toggleParent 函数。您也可以在 stackblitz 中找到解决方案：https://stackblitz.com/edit/angular-f5mizr-final-pxdgby

toggleParent(event: any, group: any) {
  debugger;
  group.checked = event.checked;
  console.log("event", event.checked, "group", group, "states value", this.states.value);
  let states = this.states.value;
  states = states ? states : [];
  if (event.checked) {
    states.push(...group.names.filter((x: any) => !states.includes(x.type)).map((x: any) => x.type))
  } else {
    console.log("else", states);
    group.names.forEach((x: any) => {
      if (states.indexOf(x.type) > -1) {
        states.splice(states.indexOf(x.type), 1)
      }
    });
  }
  this.states.setValue(states);
  console.log("statesvalue", this.states.value);
  if (!event.checked) {
    this.states.setValue(this.states.value.filter((x: any) => !x.includes(group.names)))
    //this.states.setValue([]);
  }
  console.log("final statesvalue", this.states.value);
  this.stateRecord = this.states.value;
}