Question

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

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

Im使用带有MatExpanssionPanel，MatAcrodion，MatSelectionList的Angular Material 6表示此数据，但是我需要为每个手风琴获取一个带有选定选项的数组

我尝试这个

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

此方法向我显示打开的手风琴部分的选定项目，但是当打开其他手风琴项目并在选择列表中选择其他项目时，将使用当前手风琴部分的新值重置数组。

有什么解决方案，谢谢

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的多个列表的选定选项

1 个答案: