angular 中的嵌套 select 菜单

Question

我们如何创建或是否可以创建嵌套的 select 菜单，如下面的示例 select 屏幕截图菜单，但如果用户 select 来自 REPM mat select 的项目，它将显示在 Master Broker Company 菜单的右侧。谢谢。

#例子select

#html代码

<div style="margin-top: 8px;margin-left:8px;">  
                                <mat-form-field appearance="fill" class="transaction-control-filter">
                                    <mat-label class="transaction-detail-header-label">REPM</mat-label>
                                    <mat-select #rempselect multiple (openedChange)="changeREMPFilter($event)">
                                        <div  class="select-all-property-transaction-list">
                                            <mat-checkbox color="primary" [(ngModel)]="allSelectedREMP" [ngModelOptions]="{standalone: true}"
                                                (change)="toggleAllSelectionREMP()">Select All</mat-checkbox>
                                        </div>
                                        <mat-option (click)="optionClickREMP()" *ngFor="let remp of repmList" [value]="remp.display">
                                            {{remp.display}}
                                        </mat-option>
                                    </mat-select> 
                                </mat-form-field>
                            </div>

                            <div style="margin-top: 8px;margin-left:8px;">  
                                <mat-form-field appearance="fill" class="transaction-control-filter">
                                    <mat-label class="transaction-detail-header-label">Master Broker Company</mat-label>
                                    <mat-select #companyselect multiple (openedChange)="changeCompanyFilter($event)">
                                        <div class="select-all-property-transaction-list">
                                            <mat-checkbox color="primary" [(ngModel)]="allSelectedMasterBrokerCompany" [ngModelOptions]="{standalone: true}"
                                                (change)="toggleAllSelectionCompany()">Select All</mat-checkbox>
                                        </div>
                                        <mat-option (click)="optionClickMasterBroker()" *ngFor="let masterbroker of transactionMasterBrokerCompany" [value]="masterbroker.display">
                                            {{masterbroker.display}}
                                        </mat-option>
                                    </mat-select> 
                                </mat-form-field>
                            </div>

#这是我现有的垫子select

Answer 1

也许您想查看 mat-menu 复选框。用户将从 REPM select（通过检查）一个项目。哪个将调用函数，更新 Master Broker Company 中可能的 selection？例如，在我的演示中，您只能 select 来自 Master 的项目与 REPM 中的项目相对应。我使用 card / users 模拟了一些数据来说明这一点。

<button #matMenuTrigger mat-raised-button color="primary"[matMenuTriggerFor]="repm" 
(menuOpened)="onMenuOpened()"
(menuClosed)="onMenuClosed()">REPM</button>
‎‎‎      ‎ ‎‎‎ ‎‎ 
<button #matMenuTrigger mat-raised-button color="primary"[matMenuTriggerFor]="master" 
(menuOpened)="onMenuOpened()"
(menuClosed)="onMenuClosed()">Master Broker Company</button>

<mat-menu #repm="matMenu">
  <mat-checkbox #menuItems
    *ngFor="let item of premiumAutomobilesList; let i = index;"
    [(ngModel)]="item.activated"
    (click)="$event.stopPropagation()"
    (change)="onVehicleSelect()"
    (keydown)="onMenuKeyDown($event, i)"
    >{{ item.title }}</mat-checkbox
  >
</mat-menu>

<mat-menu #master="matMenu">
  <ng-container *ngFor="let item of users; let i = index;">
  <mat-checkbox #menuItems *ngIf="selectedVehicles.includes(item.car) "
    (click)="$event.stopPropagation()"
    (change)="onSelectUsername(item)"
    >{{ item.name }}</mat-checkbox
  >
</ng-container>
</mat-menu>

<p>{{ formattedSelectedVehicles }}</p>

  public onVehicleSelect() {
    this.selectedVehicles = this.premiumAutomobilesList
      .filter(menuitem => menuitem.activated)
      .map(menuitem => menuitem.title);
      console.log(this.selectedVehicles)
  }

  onSelectUsername(item: any) {
    console.log(item)
  }

这里是一个 mat-menu 带有复选框的例子：https://stackblitz.com/edit/matmenu-with-checkboxes-demo-ohada6?file=src%2Fapp%2Fmatmenu-with-checkboxes.ts

angular 中的嵌套 select 菜单

Nested select menu in angular

javascript

typescript

angular-material

angular