Как выбрать опции множественного выбора матов при начальной загрузке или по умолчанию? - PullRequest
0 голосов
/ 17 марта 2020

Я создавал страницу для отображения списка уже существующих меню для определенной роли, используя angular таблица материалов mat и выбор нескольких матов. Страница отображает список всех меню и содержит флажок mat, который выбирает уже существующее меню для выбранной роли, как отмечено. В строке таблицы есть раскрывающийся список множественного выбора, содержащий список разрешений, и мне нужно выбрать уже имеющиеся разрешения для выбранного меню. Я пытался использовать CompareFn, но он всегда только чтение ID 1 для каждого l oop. Как мне изменить функцию CompareFn или есть ли другой способ предварительно выбрать разрешения для уже существующих меню. Я использовал приведенный ниже код в файле html.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">


    <!-- Position Column -->
    <ng-container matColumnDef="Menu_ID">
      <th mat-header-cell *matHeaderCellDef> Id </th>
      <td mat-cell *matCellDef="let element">
        <mat-checkbox *ngIf="checkForMenu(element.Menu_ID)" checked="true" #checkbox (change)="updateMenu(checkbox)"
          value="{{element.Menu_ID}}"> {{element.Menu_ID}}
        </mat-checkbox>
        <mat-checkbox *ngIf="!checkForMenu(element.Menu_ID)" #checkbox (change)="updateMenu(checkbox)"
          value="{{element.Menu_ID}}"> {{element.Menu_ID}}
        </mat-checkbox>
      </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="Menu_Name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.Menu_Name}} </td>
    </ng-container>

    <!-- Permission Column-->
    <ng-container matColumnDef="Permission">
      <th mat-header-cell *matHeaderCellDef> Permission </th>
      <td mat-cell *matCellDef="let element">

        <mat-form-field>
          <mat-label>Permissions</mat-label>
          <mat-select [compareWith]="compareFn" multiple name="permission" 
            (selectionChange)="eventSelection($event)" [(ngModel)]="menuForSelectedRole" >
            <mat-option  *ngFor="let per of allPermissionList" [value]='per' >

              {{per.Permission_Description}}

            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
    </tr>
  </table>

Примечание: к меню может быть добавлено несколько разрешений. В строке [(ngModel)] = "menuForSelectedRole" menuForSelectedRole содержит массив меню, уже представленных для роли, и разрешения, связанные с ним по одному. Menu_Id - это строка, а Permission_Id - это числовой тип.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...