p-dataView 获取选中行的值
p-dataView Getting values of selected rows
使用 primeNG p-dataview，每一行都有一个复选框和一个下拉列表。我的目标是如果我选中复选框，我想获取 selected 行（如果 selectd）的 dropdon 的值，反之亦然，如果用户 select a下拉列表中的值我想看看是否已经为这个原始检查了复选框。我怎样才能做到这一点？
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 值 selected
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;
}
考虑对您的模板进行这些更新：
<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 应用程序。
调用函数时执行您需要的任何其他操作。
使用 primeNG p-dataview，每一行都有一个复选框和一个下拉列表。我的目标是如果我选中复选框，我想获取 selected 行（如果 selectd）的 dropdon 的值，反之亦然，如果用户 select a下拉列表中的值我想看看是否已经为这个原始检查了复选框。我怎样才能做到这一点？
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 值 selected 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;
}
考虑对您的模板进行这些更新：
<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 应用程序。
调用函数时执行您需要的任何其他操作。