Question

我在一个对话框中有PrimeNG选项列表，该对话框是数据表CRUD方法的一部分，如果对话框关闭且未单击保存按钮，如何重置目标值和源值。

我需要以不同方式进行克隆吗？

> test.test2()

onRowSelect和Clone方法

 <p-dialog 
    header="User Details" 
    [(visible)]="displayDialog" 
    [responsive]="false" 
    showEffect="fade" 
    [modal]="true" 
    width="600">

      <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="user">

        <div class="ui-grid-row">
          <div class="ui-grid-col-4"><label for="userName">Username</label></div>
          <div class="ui-grid-col-8"><input pInputText id="userName" [(ngModel)]="user.userName" /></div>
        </div>

        <div class="ui-grid-row">
          <div class="ui-grid-col-4"><label for="firstName">First Name</label></div>
          <div class="ui-grid-col-8"><input pInputText id="firstName" [(ngModel)]="user.firstName" /></div>
        </div>

        <div class="ui-grid-row">
          <div class="ui-grid-col-4"><label for="lastName">Last Name</label></div>
          <div class="ui-grid-col-8"><input pInputText id="lastName" [(ngModel)]="user.lastName" /></div>
        </div>

        <div class="ui-grid-row">
          <div class="ui-grid-col-4"><label for="active">IsActive</label></div>
          <div class="ui-grid-col-8">
            <p-checkbox [(ngModel)]="user.active" binary="true"></p-checkbox>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-4"><label for="active">User Roles:</label></div>
        </div>        
      </div>

     <div class="ui-grid-row"> 
          <div class="ui-grid-col-12">                      
            <p-pickList [source]="userSourceRoles" [target]="userTargetRoles" sourceHeader="Available" targetHeader="Selected">
                <ng-template let-appRole pTemplate="item">
                    <div>{{appRole.roleName}}</div>
                </ng-template>
            </p-pickList>    
          </div>
      </div>    

      <p-footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
          <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
          <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
        </div>

      </p-footer>
    </p-dialog>

用户对象

onRowSelect(event) {
    this.isNew = false;
    this.user = this.clone(event.data);


    this.userTargetRoles = this.user.appRoles;


    //don't include items in the source if in target
    this.allRoles.forEach((allRole: AppRole) => {

      let found = false;

      this.userTargetRoles.forEach((role: AppRole) => {

        if (allRole.appRoleId === role.appRoleId) {
          found = true;
        }
      });

      if (!found) {
        this.userSourceRoles.push(allRole);
      }
    });

    this.displayDialog = true;

  }

clone(u: User): User {
    let user = new User();
    for (let prop in u) {
      user[prop] = u[prop];
    }
    return user;
  }

Answer 1

设置sourcesList = null和targetList = null

PrimeNG Angular 4选项列表重置源和目标

1 个答案: