Question

我正在自定义角度材质的选择/自动完成功能，以允许嵌套下拉列表。

在这里，我想让一个父母带很多孩子。如果我展开特定的父级下拉菜单，则只有该下拉菜单的子级才能展开或折叠。同样，应在同一情况下选择复选框事件。

我这里有一些错误

案例1。

选择A Parent复选框，C Parent复选框，将两者展开，取消选择C的每个值，然后最后取消选择Parent C复选框将仅给出A的第一个值。由于已经选择了Parent A，因此应该是A的所有值。

还有一些其他错误，希望如果情况1得到解决，那将得到解决。

任何帮助将不胜感激。

STACKBLITZ

HTML

<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>

TS代码：

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

  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];
  }

  toggleSelection(event: any, name: any, group: any) {
    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 {
      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);
    }
  }

  toggleParent(event: any, group: any) {
    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) => 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)))
    }
    console.log("final statesvalue", this.states.value);
  }

  stateList: StateGroup[] = [{
    letter: 'A',
    checked: false,
    names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
  }, {
    letter: 'C',
    checked: false,
    names: ['California', 'Colorado', 'Connecticut']
  }, {
    letter: 'D',
    checked: false,
    names: ['Delaware']
  }, {
    letter: 'F',
    checked: false,
    names: ['Florida']
  }, {
    letter: 'G',
    checked: false,
    names: ['Georgia']
  }, {
    letter: 'H',
    checked: false,
    names: ['Hawaii']
  }, {
    letter: 'I',
    checked: false,
    names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
  }, {
    letter: 'K',
    checked: false,
    names: ['Kansas', 'Kentucky']
  }, {
    letter: 'L',
    checked: false,
    names: ['Louisiana']
  }, {
    letter: 'M',
    checked: false,
    names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
      'Minnesota', 'Mississippi', 'Missouri', 'Montana'
    ]
  }, {
    letter: 'N',
    checked: false,
    names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
      'New Mexico', 'New York', 'North Carolina', 'North Dakota'
    ]
  }, {
    letter: 'O',
    checked: false,
    names: ['Ohio', 'Oklahoma', 'Oregon']
  }, {
    letter: 'P',
    checked: false,
    names: ['Pennsylvania']
  }, {
    letter: 'R',
    checked: false,
    names: ['Rhode Island']
  }, {
    letter: 'S',
    checked: false,
    names: ['South Carolina', 'South Dakota']
  }, {
    letter: 'T',
    checked: false,
    names: ['Tennessee', 'Texas']
  }, {
    letter: 'U',
    checked: false,
    names: ['Utah']
  }, {
    letter: 'V',
    checked: false,
    names: ['Vermont', 'Virginia']
  }, {
    letter: 'W',
    checked: false,
    names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
  }];
}

输出应如下所示。

Answer 1

在这里找到答案：https://stackblitz.com/edit/angular-f5mizr-n7gmx5

这将通过您的测试用例1。我发现了另一种情况

多次选择和取消选择任何子元素将重复重复选择的值。

这种情况在我给定的堆叠闪电中也得到解决。

Answer 2

也许此评论不是您的确切答案，但可以为您提供解决方法的思路。

基本上，您的问题是您正在将不同的组件（例如mat-autocomplete与mat-select以及带有mat-optgroup的多个选择）组合在一起。这会非常冒险，并且会给您带来很多麻烦。另外，不建议这样做。

此外，您还有一个formControl，它是： [formControl]="states" 在输入内部，这样就可以了，这是获得所有用逗号分隔的字符串的原因，这是因为formControl的值。

您可以看一下formControls的文档： https://angular.io/guide/reactive-forms

因此，我强烈建议将formControl更改为mat-select。（我知道您将使用子数组存储所有数组的值。）

您需要编辑输入内容，例如：

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
    <!-- <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
     <mat-autocomplete #autoGroup="matAutocomplete"> -->
           <input type="text" matInput placeholder="" aria-label="" matInput [matAutocomplete]="auto" [formControl]="" style="">
           <span *ngIf="states.value">
           {{states.value ? states.value[0] : ''}}
           (+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
           </span>

这是堆叠闪电战： https://stackblitz.com/edit/angular-f5mizr-wefuik

自定义垫选择以允许嵌套值成角度

2 个答案: