fix: 修复 account select 搜索后无法选择的问题

src/app/elements/connect/connect-dialog/connect-dialog.component.html

@@ -1,62 +1,62 @@
 <div>
   <div mat-dialog-title>
     <h3>{{"Connect" | translate}} - {{ asset.name | truncatechars:30 }}</h3>
-    <button mat-icon-button aria-label="close dialog" mat-dialog-close="">
+    <button aria-label="close dialog" mat-dialog-close="" mat-icon-button>
       <mat-icon>close</mat-icon>
     </button>
   </div>
 
-  <nav mat-tab-nav-bar style="margin-bottom: 20px" class="protocol-tab">
-    <a mat-tab-link
+  <nav class="protocol-tab" mat-tab-nav-bar style="margin-bottom: 20px">
+    <a (click)="onProtocolChange(p)"
        *ngFor="let p of protocols"
-       (click)="onProtocolChange(p)"
        [active]="protocol.name === p.name"
        [title]="p.name"
+       mat-tab-link
     >
       {{ p.name | uppercase }}
     </a>
   </nav>
 
-  <div mat-dialog-content (keyup.enter)="onConfirm()" class="dialog-body">
+  <div (keyup.enter)="onConfirm()" class="dialog-body" mat-dialog-content>
     <elements-select-account
-      [asset]="asset"
+      (accountSelectedChange)="onSelectAccount($event)"
       [accounts]="accounts"
-      [onSubmit]="onSubmit$"
+      [asset]="asset"
       [manualAuthInfo]="manualAuthInfo"
-      (accountSelectedChange)="onSelectAccount($event)"
+      [onSubmit]="onSubmit$"
     >
     </elements-select-account>
 
     <elements-connect-method
-      class="connect-method-zone"
-      [protocol]="protocol"
-      [connectMethod]="connectMethod"
       (onDownloadRDPFile)="onConfirm(true)"
+      [(connectMethod)]="connectMethod"
+      [protocol]="protocol"
+      class="connect-method-zone"
     >
     </elements-connect-method>
 
     <elements-advanced-option
-      [protocol]="protocol"
-      [connectMethod]="connectMethod"
       (onOptionsChange)="onAdvancedOptionChanged($event)"
+      [connectMethod]="connectMethod"
+      [protocol]="protocol"
     >
     </elements-advanced-option>
 
     <div class="auto-connect">
       <label class="zone-label" style="display: block">{{ "Remember select" | translate }}</label>
-      <mat-checkbox name="auto-login" [(ngModel)]="autoLogin">
+      <mat-checkbox [(ngModel)]="autoLogin" name="auto-login">
         {{ "Automatic login next" | translate }}
       </mat-checkbox>
     </div>
 
     <mat-dialog-actions style="float: right; margin: 20px 0 10px 0; width: 100%">
-      <button mat-raised-button
+      <button (click)="onConfirm()"
+              [disabled]="isConnectDisabled()"
+              [mat-dialog-close]="outputData"
               color="primary"
+              mat-raised-button
               style="width: 100%"
               type="submit"
-              [disabled]="isConnectDisabled()"
-              [mat-dialog-close]="outputData"
-              (click)="onConfirm()"
       >
         {{"Connect"| translate}}
       </button>

src/app/elements/connect/connect-dialog/select-account/select-account.component.ts

@@ -1,8 +1,8 @@
 import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
-import {Account, AccountGroup, AuthInfo, Asset} from '@app/model';
+import {Account, AccountGroup, Asset, AuthInfo} from '@app/model';
 import {BehaviorSubject, ReplaySubject, Subject} from 'rxjs';
 import {FormControl, Validators} from '@angular/forms';
-import {AppService, LocalStorageService, LogService, SettingService, I18nService} from '@app/services';
+import {AppService, I18nService, LocalStorageService, LogService, SettingService} from '@app/services';
 import {takeUntil} from 'rxjs/operators';
 
 @Component({
@@ -28,29 +28,30 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy {
   filteredOptions: AuthInfo[];
   accountManualAuthInit = false;
   usernamePlaceholder: string = 'Username';
-
-  protected _onDestroy = new Subject<void>();
   public accountSelected: Account;
   public groupedAccounts: AccountGroup[];
   public accountCtl: FormControl = new FormControl();
   public accountFilterCtl: FormControl = new FormControl();
   public filteredUsersGroups: ReplaySubject<AccountGroup[]> = new ReplaySubject<AccountGroup[]>(1);
-  public compareFn = (f1, f2) => f1 && f2 && f1.id === f2.id;
+  protected _onDestroy = new Subject<void>();
 
   constructor(private _logger: LogService,
               private _appSvc: AppService,
               private _i18n: I18nService,
               private _settingSvc: SettingService,
               private _cdRef: ChangeDetectorRef,
               private _localStorage: LocalStorageService
-  ) {}
+  ) {
+  }
 
   get noSecretAccounts() {
     return this.accounts
       .filter((item) => !item.has_secret)
       .sort((a, b) => {
         const eq = +a.username.startsWith('@') - +b.username.startsWith('@');
-        if (eq !== 0) { return eq; }
+        if (eq !== 0) {
+          return eq;
+        }
         if (a.name === 'root') {
           return -1;
         }
@@ -66,6 +67,8 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy {
       });
   }
 
+  public compareFn = (f1, f2) => f1 && f2 && f1.alias === f2.alias;
+
   ngOnInit() {
     this.groupedAccounts = this.groupAccounts();
     this.filteredUsersGroups.next(this.groupedAccounts.slice());
@@ -155,31 +158,18 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy {
     if (!search) {
       this.filteredUsersGroups.next(this.groupedAccounts.slice());
       return;
-    } else {
-      search = search.toLowerCase();
     }
-    this.filteredUsersGroups.next(
-      accountsGroupsCopy.filter(group => {
-        const showGroup = group.name.toLowerCase().indexOf(search) > -1;
-        if (!showGroup) {
-          group.accounts = group.accounts.filter(account => {
-            return account.name.toLowerCase().indexOf(search) > -1;
-          });
-        }
-        return group.accounts.length > 0;
-      })
-    );
-  }
-
-  protected copyGroupedAccounts(groups) {
-    const accountsCopy = [];
-    groups.forEach(group => {
-      accountsCopy.push({
-        name: group.name,
-        accounts: group.accounts.slice()
-      });
+    search = search.toLowerCase();
+    const filteredGroups = accountsGroupsCopy.filter(group => {
+      const showGroup = group.name.toLowerCase().indexOf(search) > -1;
+      if (!showGroup) {
+        group.accounts = group.accounts.filter(account => {
+          return account.name.toLowerCase().indexOf(search) > -1;
+        });
+      }
+      return group.accounts.length > 0;
     });
-    return accountsCopy;
+    this.filteredUsersGroups.next(filteredGroups);
   }
 
   setUsernamePlaceholder() {
@@ -238,4 +228,15 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy {
   getSavedAuthInfos() {
     this.localAuthItems = this._appSvc.getAccountLocalAuth(this.asset.id);
   }
+
+  protected copyGroupedAccounts(groups) {
+    const accountsCopy = [];
+    groups.forEach(group => {
+      accountsCopy.push({
+        name: group.name,
+        accounts: group.accounts.slice()
+      });
+    });
+    return accountsCopy;
+  }
 }