p-dataView Получение значений выбранных строк

Question

Используя primeNG p-dataview, у меня есть флажок и раскрывающийся список для каждой строки.Моя цель: если я проверю флажок, я хочу получить значение дропдона для выбранной строки (если выбрано), то же самое наоборот. Если пользователь выбирает значение из выпадающего меню, я хочу увидеть, если флажок уже установленза это сырье.Как я могу сделать это?

HTML

<p-dataView [value]="iErsaDefaultApps" [paginator]="true" [rows]="20" [sortField]="sortField" [sortOrder]="sortOrder" paginatorPosition="both">
    <ng-template let-apps let-rowIndexValue="rowIndex" pTemplate="listItem">
    <div>
        <input type="checkbox" (click)="toggleSelectedApp($event)" id="defaultAppID" name="defaultApps" style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px" [value]='apps.app_id'> {{apps.app_name}}
    </div>
    <div>
        <select name="role" class="dropdown" style="width:60%" (ngModelChange)="selectedDefaultAppRole($event,rowIndex)" [(ngModel)]="selectedRole[rowIndex]" >
            <option class="dropdown-item" value="" selected>Select</option>
            <option class="dropdown-item" *ngFor='let role of apps.roles' [ngValue]="role.app_role_id">
                {{role.app_role_name}}
            </option>
        </select>
    </div>
    </ng-template>
</p-dataView>

TS

    selectedRole: any[] = []

    toggleSelectedApp(event: any)
    {
       //need to check the values of the drpown?
       console.log('checkbox' + event.srcElement.checked);
    }
}

selectedDefaultAppRole(event: any, index:any) {
    //also need to check th value of the checkbox
    console.log('selected defult dropdown ' + event);
    console.log('selected index ' + event);
  }

***********************************************************Обновить********************************************** 1) selectedDefaultAppRole не будет знатьесли флажок установлен или нет 2) toggleSelectedApp не будет знать, какое значение drpdown выбрано HTML

<p-dataView [value]="iErsaDefaultApps" [paginator]="true" [rows]="20">
    <ng-template let-apps let-rowIndexValue="rowIndex" pTemplate="listItem">
        <div>
            <input type="checkbox" (click)="toggleSelectedApp($event, rowIndexValue)" id="defaultAppID" name="defaultApps"
                style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px" [value]='apps.app_id'> {{apps.app_name}}
        </div>
        <div>
            <select name="role" class="dropdown" style="width:60%" (ngModelChange)="selectedDefaultAppRole($event, rowIndexValue,apps.app_id)"
                [(ngModel)]="selectedRole[rowIndexValue]" >
                <option class="dropdown-item" value="" selected>Select</option>
                <option class="dropdown-item" *ngFor='let role of apps.roles' [ngValue]="role.app_role_id">
                    {{role.app_role_name}}
                </option>
            </select>
        </div>
    </ng-template>
</p-dataView>

TS 2 проблемы с

   toggleSelectedApp(event: any, rowIndexValue: any)
    {

                this.selectedObject = this.iErsaAppList
               .find(x => x.app_id == event.srcElement.value);

           const index: number = this.iErsaDefaultApps.indexOf(this.selectedObject);

                    const cApp = this.iErsaDefaultApps.filter(a => a.app_id === index);
               console.log('currentApp', cApp);

    }

   selectedDefaultAppRole(event: any, index: number,app_id:number) {
        console.log('selected app_id ' + app_id);

        const cApp = this.iErsaDefaultApps.filter(a => a.app_id == app_id);
            console.log('currentAppRole', cApp);
            console.log('currentAppRole', event);

    }

интерфейс

export interface IErsaApps {

        app_id: number;
        app_type_id: number;
        app_name: string;
        app_roles: string;
        app_sort_id?: number;
       roles: Array<IErsaAppRoles>
}

export interface IErsaAppRoles {

    app_role_id: number;
    app_role_app_id: number;
    app_role_name: string;
    app_role_sort_id?: number;

}

Answer 1

Подумайте о внесении этих обновлений в свой шаблон:

<p-dataView [value]="iErsaDefaultApps" [paginator]="true" [rows]="20">
  <ng-template let-apps let-rowIndexValue="rowIndex" pTemplate="listItem">
  <div>
      <input type="checkbox" (click)="toggleSelectedApp($event, rowIndexValue)" id="defaultAppID" name="defaultApps"
        style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px"
            [value]='apps.app_id'> {{apps.app_name}}
  </div>
  <div>
      <select name="role" class="dropdown" style="width:60%"
        (change)="selectedDefaultAppRole($event, rowIndexValue)" [(ngModel)]="apps.app_role">
          <option class="dropdown-item" value="" selected>Select</option>
          <option class="dropdown-item" *ngFor='let role of apps.roles' [value]="role.app_role_id">
              {{role.app_role_name}}
          </option>
      </select>
  </div>
  </ng-template>
</p-dataView>

Это похоже на то, что у вас есть сейчас, с добавлением передачи значения rowIndexValue в функции toggleSelectedApp и selectedDefaultAppRole,rowIndexValue доступен в шаблоне, потому что вы использовали let-rowIndexValue="rowIndex".Это означает, что индекс из данных, поступающих с iErsaDefaultApps, будет доступен для использования.

ОБНОВЛЕНИЕ: Я изменил то, к чему вы привязывались, с помощью ngModel, чтобы установить выбранное значение наapps.app_role напрямую.Измените [value]="role.app_role_id" на [value]="role.app_role_name", если вы предпочитаете сохранить имя роли.

Затем вы можете получить доступ к информации в коде TS следующим образом:

export class MyComponent {
  iErsaDefaultApps = [{
    app_id: 1,
    app_name: 'App One',
    app_role: '',
    roles: [{
      app_role_id: 0,
      app_role_name: 'App Role One'
    },
    {
      app_role_id: 1,
      app_role_name: 'App Role Two'
    }]
  },
  {
    app_id: 3,
    app_name: 'App Two',
    app_role: '',
    roles: [{
      app_role_id: 0,
      app_role_name: 'App Role One'
    },
    {
      app_role_id: 1,
      app_role_name: 'App Role Two'
    }]
  }];

  selectedApps: Set<IErsaApps> = new Set<IErsaApps>();

  toggleSelectedApp(event: any, rowIndexValue: number) {
    // This adds or remove items from the selectedApps set
    const cApp = this.iErsaDefaultApps[rowIndexValue];
    console.log('Selected App', cApp);
    if (event.srcElement.checked) {
      this.selectedApps.add(cApp);
    } else {
      this.selectedApps.delete(cApp);
    }
    console.log('Selected Apps', this.selectedApps);
  }

  selectedDefaultAppRole(event: any, index: any) {
    // Now you can find out of the current app is selected
    const cApp = this.iErsaDefaultApps[index];
    console.log('Selected App', cApp);
    const isAppSelected = this.selectedApps.has(cApp);
    console.log('Is App Selected', isAppSelected);
    console.log('Selected Apps', this.selectedApps);
  }
}


export interface IErsaApps {
  app_id: number;
  app_name: string;
  app_role: string;
  roles: Array<IErsaAppRoles>;
}

export interface IErsaAppRoles {
  app_role_id: number;
  app_role_name: string;
}

Это добавляет простоепоиск на основе индекса, переданного из шаблона.Затем он пытается определить, установлено ли selectedApps has приложением в нем.

Делайте все, что вам нужно, когда вызывается функция.