Question

我有一个包含多行的表，每一行指定不同的部门。有多个列，每个列都属于一个组。除第一列（用于显示部门名称）外，所有列均具有和附加自动完成（用户列表）的输入字段。用户列表取决于部门的类型。

因此，当用户单击教学部门作为行数据的输入字段时，教学部门下的所有用户将被填充到我的自动完成列表下，该信息通过简单的服务从我的数据库中输入

UserService.TS

getUsersByDepartmentId(departmentId: number, userName: string) {
      return this.http.get<User[]>(`apiUrl/${departmentId}/${userName}/getusers`);
}

new-component.ts

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger }) 
autoComplete: MatAutocompleteTrigger;

testData = [1,2,3,4,5,6];


getUsers(departmentId: number, userName: string) {
  this.userServive.getusersByDepartmentId(departmentId, userName)
  .subscribe(result => {
   this.filteredUsers = res;
 })  
}

checkOpen() {
console.log(this.autoComplete.panelOpen)
return this.autoComplete.panelOpen;
}

这是我的HTML new-component.html

<ng-container *ngFor="let group of groups; let i = index" [matColumnDef]="group.name">
            <th  mat-header-cell 
                *matHeaderCellDef
                (mouseenter)="setGroupIndesxPosition(i)">
                    <div >
                        <h4>{{group.name | titlecase}} <span style="cursor: pointer" (click)="editGroup(group)" class="pull-right glyphicon glyphicon-pencil"></span></h4>
                    </div>
                    <div>
                        <span   cdkDropList
                        [cdkDropListData]="role"
                        (cdkDropListDropped)="addRoles($event, i)" *ngFor="let role of group.roles; let isLast=last" cdkDrag>{{role.id}}{{isLast ? '' : ', '}}</span> 
                    </div>
            </th>
            <td mat-cell *matCellDef="let row">
              <input id="userInput" #autoCompleteInput *ngIf="this.group.roles.length !== 0"
                placeholder="user Name"
                ngModel
                (ngModelChange)="getUser(row.id, $event)"
                [ngModelOptions]="{standalone: true}"
                [(ngModel)]="this.group.roles[findIndex(this.groups[i].roles, row.id)].user.name" 
                [matAutocomplete]="auto" 
                (focusout)="checkOpen() === false ? saveUser() : ''" 
                type="text">

                <input id="userInput"
                placeholder="Disabled, drag role to enable"
                *ngIf="this.group.roles.length === 0"
                [disabled]="this.group.roles.length === 0"
                  type="text" >
              <mat-autocomplete #auto="matAutocomplete">
                  <mat-option *ngFor="let user of filteredUsers" [value]="user.name">
                    {{user.name}}
                  </mat-option>
                </mat-autocomplete>
            </td>
        </ng-container>

我现在使用matAutocompleteTrigger遇到的问题是，如果打开了列表，则checkOpen方法返回true；如果在自动完成ngFor循环中使用testData的情况下未显示列表，则返回false。

如果我将来自服务的数据用于人口自动完成列表，则即使我的列表处于打开状态，checkOpen方法也始终返回false。

我要运行checkOpen方法的原因是当用户将焦点移到输入字段之外时运行saveUser方法（自动完成列表中的选择选项除外）

谢谢。

上一篇文章：

Save on (focusout) with angular mat-autocomplete

谢谢。

Answer 1

我要运行checkOpen方法的原因是运行我的saveUser 用户将焦点移到输入字段之外时的方法（自动填充列表中的选择选项）

有一种更简便的方法：

<input (focusout)="saveUser()" ... >

saveUser() {
  setTimeout(() => {
    if (document.activeElement.tagName.toLowerCase() !== 'mat-option') {
      reallySaveUser();
    }
  });
)

MatAutocompleteTrigger不适用于响应数据

1 个答案: