Question

使用primeNG p-dataview，每行都有一个复选框和一个下拉列表。我的目标是，如果我选中复选框，我想以相同的方式获取所选行的dropdon值（如果选中），如果用户从下拉列表中选择一个值，我想查看复选框是否已被选中为了这个原料。我怎样才能做到这一点？

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应用。

在调用函数时需要做的其他事情。

p-dataView获取选定行的值

1 个答案: