Question

我已经在Angular 6中创建了一个表。

我想要的是每当我单击特定行的编辑按钮时，它都应启用该特定角色的角色下拉列表。截至目前，它已为所有行启用了该功能。

<th>
        <div id="thRole">
            <div *ngIf="!editRole else editRoleT">
                        {{user.description}}
                        <a (click)="EditRoles()">Edit</a>
            </div>
            <ng-template #editRoleT>
                    <select  name="rolelevel" id="drp" >
                            <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
                        </select>
                        <a (click)="EditRoles()" >Add</a>
            </ng-template>
        </div>
       </th>

EditRole（）

  EditRoles(){
     this.editRole=!this.editRole;
}

我该怎么做？

编辑：所有表格

<nz-table
  #rowSelectionTable
  [nzData]="data"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
  (nzPageIndexChange)="refreshStatus()"
  (nzPageSizeChange)="refreshStatus()">
  <thead>
    <tr style="text-align: right;">
      <th ></th>
      <th style="text-align:right;font-family:  B Koodak;font-size: 16px">نام</th>
      <th  style="text-align:right;font-family: B Koodak;font-size: 16px">ایمیل</th> 
      <th  style="text-align:center;font-family: B Koodak;font-size: 16px">نقش</th> 
      <th  style="text-align:right;font-family: B Koodak;font-size: 16px">اکانت</th>
     <th  style="text-align:center;font-family:B Koodak;font-size: 16px">عملیات</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr *ngFor="let user of data | searchuser: nameSearch: emailSearch: roleSearch">
      <td >
         <i nz-icon (click)="infoUser(user.id)" style="cursor:pointer;" type="info-circle" theme="outline"></i>
        </td> 
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.desplayName}}</td>
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.email}}</td> 
      <th  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px;width: 239px;">
        <div id="thRole">
            <div *ngIf="!editRole else editRoleT">
                        {{user.description}}
                        <a (click)="EditRoles()" style="color:#ffaa2a;float: left;text-decoration: blue;">ویرایش</a>
            </div>
            <ng-template #editRoleT>
                    <select  name="rolelevel" id="drp" >
                            <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
                        </select>
                        <a (click)="EditRoles()" style="padding-top: 8px;color:#055f09;float: left;text-decoration: blue;">ثبت</a>
            </ng-template>
        </div>
       </th> 
      <th style="text-align:center;font-family: Iranian Sans;font-weight: 500;font-size: 13px">
            <p-inputSwitch [(ngModel)]="user.isActive" (click)="changeActive(user.id)"></p-inputSwitch>
      <th style="text-align:center;font-weight: 500;font-family: Iranian Sans;font-size: 13px">
         <a id="noconfirm">حذف</a>
      </th>
    </tr>
  </tbody>

</nz-table>

这是所有表代码。

Answer 1

有多种方法可以处理您的情况，但是最简单的方法是必须存储行索引并与每行匹配。

<tr *ngFor="let user of data; let rowIndex of index | searchuser: nameSearch: emailSearch: roleSearch">
      <td >
         <i nz-icon (click)="infoUser(user.id); seletedRowIndex = rowIndex" style="cursor:pointer;" type="info-circle" theme="outline"></i>
        </td> 
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.desplayName}}</td>
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.email}}</td> 
      <th  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px;width: 239px;">
        <div id="thRole">
            <div *ngIf="!(seletedRowIndex === rowIndex) else editRoleT">
                        {{user.description}}
                        <a (click)="EditRoles()" style="color:#ffaa2a;float: left;text-decoration: blue;">ویرایش</a>
            </div>
            <ng-template #editRoleT>
                    <select  name="rolelevel" id="drp" >
                            <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
                        </select>
                        <a (click)="seletedRowIndex = rowIndex" style="padding-top: 8px;color:#055f09;float: left;text-decoration: blue;">ثبت</a>
            </ng-template>
        </div>
       </th> 
      <th style="text-align:center;font-family: Iranian Sans;font-weight: 500;font-size: 13px">
            <p-inputSwitch [(ngModel)]="user.isActive" (click)="changeActive(user.id)"></p-inputSwitch>
      <th style="text-align:center;font-weight: 500;font-family: Iranian Sans;font-size: 13px">
         <a id="noconfirm">حذف</a>
      </th>
    </tr>

注意：该代码直接在Stackoverflow编辑器上编写，因此可能存在拼写错误或语法错误。请纠正自己。

Answer 2

请查看此代码。将editRole变量添加到用户对象，并检查特定用户的editRole是否已更改。还要用div替换ng-template。

<div id="thRole">
  <div *ngIf="!user.editRole">
    {{user.description}}
    <a (click)="EditRoles(user)">Edit</a>
  </div>
  <div *ngIf="user.editRole">
    <select name=" rolelevel" id="drp">
      <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
    </select>
    <a (click)="EditRoles(user)">Add</a>
  </div>
</div>

现在，“编辑角色功能”中使用类似的方法

EditRoles(user){
     // Find the user from data object and invert editRole
}

Answer 3

在 your-component.component.html

使用[（ngModel）]绑定选定的roleId。

<select  name="rolelevel" id="drp" [(ngModel)]="selectedRoleId">
  <option *ngFor="let role of roles " [value]="role.id">{{ role.description }}
  </option>
</select>

在 your-component.component.ts

selectedRoleId;

别忘了在功能模块中导入FormsModule。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
   ...
   FormsModule,
   ...
  ]
})
export class YourModule {}

angular6中选定行的活动下拉菜单

3 个答案: