【发布时间】：2020-11-17 21:10:36
【问题描述】：
我正在自定义角度材料选择/自动完成以允许嵌套下拉菜单。
在这里，我想要一个包含许多孩子的父下拉列表。如果我展开特定的父下拉列表，则只有该下拉列表的子项应该展开或折叠。同理，checkbox事件应该在同一个场景中被选中。
我这里有一些错误
案例 1。
选择 A Parent 复选框，C Parent 复选框，展开两者，取消选择 C 的每个值，然后最后取消选择父 C 复选框将只给出 A 的第一个值。预期应该是 A 的所有值，因为父 A 已被选中。
还有一些额外的错误，希望如果案例 1 解决了，那将会得到解决。
任何帮助将不胜感激。
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']
}];
}
输出应如下所示。
【问题讨论】：
标签： javascript html css angular angular-material