我在表格行的每一行都有一個下拉串列,每次我從下拉串列中選擇一個選項時,所選值都會在其余下拉串列中更新為相同的值:
我的html代碼:
<p-table....>
<ng-template pTemplate="body" let-user>
<tr>
current user permission: {{user.Permission}}
<p-dropdown [options]="PermissionOptions" [(ngModel)]="permissionVal" placeholder="change..." optionLabel="name">
</p-dropdown>
</td>
</tr>
</ng-template>
TS:
interface PermissionType {
name: string,
}
PermissionOptions1: PermissionType[];
permissionVal1: PermissionType;
constructor()
{
this.PermissionOptions1 = [
{name: FolderPermissionEnum.WRITE},
{name: FolderPermissionEnum.READ},
];
}
問題可能出現在從下拉串列中接收選定值的變數permissionVal 上,現在該值對于表上的所有下拉串列都是通用的。如果我能以某種方式將該變數permissionVal更改為一個陣列,也許我可以解決這個問題,但我不知道我該怎么做或在HTML 上呼叫它。
uj5u.com熱心網友回復:
[(ngModel)]您可以將其拆分為[ngModel]屬性系結和(ngModelChange)事件系結語法,而不是使用雙向系結語法,這將使您能夠根據用例更好地控制資料管理。
由于您在表格行的每一行都有一個下拉串列,因此我認為您可以通過一種方法來獲取行號。假設row_num代表行號,那么你可以有如下邏輯:
<!-- html file -->
<p-dropdown [options]="PermissionOptions" [ngModel]="permissionValList[row_num]"
(ngModelChange)="updatePermissionValList($event, row_num)"
placeholder="change..." optionLabel="name">
</p-dropdown>
/* ts file */
permissionValList: PermissionType[] = []; // or can define type as --> {[key: number]: PermissionType} with default value as {}
updatePermissionValList(event: PermissionType, row_num: number) {
this.permissionValList[row_num] = event;
}
編輯:
[(ngModel)]="permissionValList[row_num]" 在您的情況下應該足夠了,并且不需要添加任何簡單分配的方法,因為雙向系結做同樣的事情。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/409246.html
標籤:
