MatAutocompleteTrigger 不适用于响应数据答案

【问题标题】：MatAutocompleteTrigger does not work with response dataMatAutocompleteTrigger 不适用于响应数据
【发布时间】：2019-07-29 18:57:28
【问题描述】：

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

因此，当用户单击以教学部门为行数据的输入字段时，教学部门下的所有用户都将填充在我的自动完成列表下，这些信息是通过一个简单的服务从我的数据库中传入的

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，如果列表未显示，则返回 false，以防我在自动完成 ngFor 循环中使用 testData。

如果我将来自我的服务的数据用于人口自动完成列表，即使我的列表已打开，checkOpen 方法也总是返回 false。

我想运行 checkOpen 方法的原因是当用户关注输入字段时运行我的 saveUser 方法（自动完成列表中的选择选项除外）

谢谢。

上一篇文章：

Save on (focusout) with angular mat-autocomplete

谢谢。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我想运行 checkOpen 方法的原因是运行我的 saveUser 当用户将注意力移出输入字段时的方法（除了自动完成列表中的选择选项）

有一种更简单的方法：

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

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

【讨论】：