获取 MatSelectionList 的多个列表的选定选项 - Angular 6

Question

我正在为此寻找解决方案：我有这个

 result = [
    {
      "roomsFloor": {
          "floor": {
            "floorName": "piso 1",
            "room": [{
              "roomNumber": "103"
            }]
          }
        }
    },
   {
      "roomsFloor": {
          "floor": {
            "floorName": "piso 2",
            "room": 
            [
              {
                "roomNumber": "104"
              },
                {
                "roomNumber": "105"
              }            
            ]
          }
        }
    },
  ]

我使用 Angular Material 6 和 MatExpanssionPanel、MatAcrodion、MatSelectionList 来表示此数据，但我需要为每个 Accordionselected 选项获取一个数组

我试试这个

<mat-accordion>
  <mat-expansion-panel *ngFor="let item of result" hideToggle = "false">
    <mat-expansion-panel-header>
       <mat-panel-title style="color: #44474B">
           <strong><p>{{item.roomsFloor.floor.floorName}}</p></strong>
       </mat-panel-title>
       <mat-panel-description>          
       </mat-panel-description>
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
       <mat-selection-list #items (selectionChange)="handleSelection(items.selectedOptions)">
           <mat-list-option *ngFor="let roomDetail of item.roomsFloor.floor.room" [value]="roomDetail">
              <mat-icon mat-list-icon>meeting_room</mat-icon>
              <h4 mat-line>No. {{roomDetail.roomNumber}}</h4>
          </mat-list-option>
      </mat-selection-list>
    </ng-template>                   
   </mat-expansion-panel>
</mat-accordion>

.TS组件

   handleSelection(itemRoomSelected) {
        this.selectedRooms = itemRoomSelected.selected.map(item => item.value);
        console.log('selected room', this.selectedRooms);
    }

此方法显示手风琴部分的 selected 项目已打开，但当打开手风琴的其他项目和 selection 列表中的 select 其他项目时，数组是使用当前手风琴部分的新值重置。

有什么解决办法，谢谢

Answer 1

您可以使用模板驱动表单来解决这个问题。

将您的 html 包装在表单标签中，并定义您需要的任何表单名称的模板引用...在本示例中，我只使用了 myForm，但它可以是您需要的任何名称。

<form #myForm="ngForm">

当使用模板驱动的表单时，您需要为 mat-selection-list 分配一个名称，以便它可以创建一个 FormControl 来存储值...在这个例子中，我将您的 floorName 作为最有意义...

请注意： 名称 [] 周围的方括号用于属性绑定...这很重要。
```
[name]="item.roomsFloor.floor.floorName"
```

然后将表单值传递给选择更改时的方法。

(selectionChange)="handleSelection(myForm.value)"

这将导致来自两个手风琴的值数组，并将 floorName 作为父键传递给您的方法。

piso 1: Array(1)
0: {roomNumber: "103"}

piso 2: Array(2)
0: {roomNumber: "104"}
1: {roomNumber: "105"}

HTML

<form #myForm="ngForm">
<mat-accordion>
  <mat-expansion-panel *ngFor="let item of result" hideToggle = "false">
    <mat-expansion-panel-header>
       <mat-panel-title style="color: #44474B">
           <strong><p>{{item.roomsFloor.floor.floorName}}</p></strong>
       </mat-panel-title>
       <mat-panel-description>          
       </mat-panel-description>
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
       <mat-selection-list #items (selectionChange)="handleSelection(myForm.value)" [name]="item.roomsFloor.floor.floorName" ngModel>
           <mat-list-option *ngFor="let roomDetail of item.roomsFloor.floor.room" [value]="roomDetail">
              <mat-icon mat-list-icon>meeting_room</mat-icon>
              <h4 mat-line>No. {{roomDetail.roomNumber}}</h4>
          </mat-list-option>
      </mat-selection-list>
    </ng-template>                   
   </mat-expansion-panel>
</mat-accordion>
</form>

获取 MatSelectionList 的多个列表的选定选项 - Angular 6

Get Selected Option Of Multiple List of MatSelectionList - Angular 6

javascript

typescript

angular

angular-material-6