标签: mat-autocomplete

我尝试使用<mat-autocomplete>Angular Material(不是AngularJS)而不使用反应形式.但他们所有的例子都使用反应形式......

我尝试做的事情:
1.当输入内容时mat-input,进行Ajax调用以检索用户列表
2.显示自动完成中的用户列表(显示用户名),但将用户存储为模型
3当模型改变时,调用我选择的函数

现在我做那些疯狂的事情(我说疯了似乎很多).

<mat-form-field fxLayout>
  <input type="text"
             matInput fxFlex="100"
             [(ngModel)]="listFilterValue"
             (keyup)="memberInputChanged(input.value)"
             (change)="memberChanged()"
             *ngIf="isAutocompleteNeeded()"
             #input
             [matAutocomplete]="auto">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" [displayWith]="getMemberAsStr">
       <mat-option *ngFor="let member of members | async" [value]="member">
          {{ getMemberAsStr(member) }}
       </mat-option>
</mat-autocomplete>

现在,只有console.log在我的JS中才能看到所谓的内容,具有什么价值,所以我不在这里分享它.我使用正确的属性,正确的逻辑吗？

(members我的组件中的属性是Rxjs BehaviourSubject)

我现在所做的事情不起作用,因为listFilterValue它从未被设定为任何东西.

谢谢你的帮助

我是Angular的新手,我正在尝试使用Angular 5构建一个具有自动完成功能的文本字段.

我在Angular Material docs中找到了这个例子:

https://stackblitz.com/angular/kopqvokeddbq?file=app%2Fautocomplete-overview-example.ts

我想知道如何编写单元测试来测试自动完成功能.我正在为input元素设置一个值并触发'input'事件并尝试选择mat-option元素,但是看到它们都没有创建:

我的组件html的相关部分:

<form>
  <mat-form-field class="input-with-icon">
    <div>
      <i ngClass="jf jf-search jf-lg md-primary icon"></i>
      <input #nameInput matInput class="input-field-with-icon" placeholder="Type name here"
             type="search" [matAutocomplete]="auto" [formControl]="userFormControl" [value]="inputField">
    </div>
  </mat-form-field>
</form>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name"
              (onSelectionChange)="onNameSelect(option)">
    {{ option.name }}
  </mat-option>
</mat-autocomplete>

规格文件:

it('should filter users based on input', fakeAsync(() => {
    const hostElement = fixture.nativeElement;

    sendInput('john').then(() => {
        fixture.detectChanges();
        expect(fixture.nativeElement.querySelectorAll('mat-option').length).toBe(1);

        expect(hostElement.textContent).toContain('John Rambo');
    });
}));
function sendInput(text: string) {
    let inputElement: HTMLInputElement; …

我有一个 mat-autocomplete 组件，其中的选项已连接，可以在用户键入时从服务调用中填充（部分搜索）：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="areaSelected($event.option.value)">
      <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
</mat-autocomplete>

在我的 TS 代码中，当用户选择一个值时，我在处理结束时将选项数组设置为空数组：

  resetFetchedOptions() {
    this.options = [];
}

这是因为代码被调用，并且 this.options 设置为空数组。问题是，当用户尝试在字段中键入另一个值时，之前的选项仍然存在。如果他们输入，选项将被清除，并且基于部分搜索的新选项将被填充，所以我认为这是一个渲染问题，但我对 Angular Material 有点陌生，所以我不确定这是否是错误的方法或者我错过了一个步骤。

谢谢！

我在我的 angular 项目中使用 mat autocomplete https://material.angular.io/components/autocomplete/api。在加载包含 25k 项的大数据时。性能变低。搜索和建议自动完成太慢了。如何提高这个性能？

我正在使用带有 mat 自动完成功能的反应式表单。我在应用程序的其他部分使用了自动完成功能，但我无法弄清楚。我有一个formarray，每次我想在我的情况下添加一个新传感器时都会添加一个输入。自动完成在我的第一个输入中工作正常，但是当我尝试添加更多输入时显示错误：错误：必须在索引处为表单控件提供一个值：1

HTML：

<div class="row">
    <div class="input-field col s10">
      <div class="form-group">
        <div formArrayName="sensors_id">
          <div *ngFor="let sensor of addHomeboxPForm.get('sensors_id')['controls']; let i = index">
            <br>
            <input formControlName="{{i}}" type="text" placeholder="Select Sensor" aria-label="Number" matInput [matAutocomplete]="auto1">
            <mat-autocomplete autoActiveFirstOption #auto1="matAutocomplete" [displayWith]="displayWith" >
              <mat-option (onSelectionChange)="updateForm($event, [sensor.sensors_id], 'sensors_id')" *ngFor="let sensor of filteredOptionsS | async" [value]="sensor.sensor_serial">
                {{sensor.sensor_serial}}
              </mat-option>
            </mat-autocomplete>
            <div class="button-left">
              <button *ngIf="addHomeboxPForm.controls.sensors_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">RemoveSensor</button>
            </div>
          </div>
        </div>
      </div>


<div class="input-field col s2">
        <button type="button" class="btn" (click)="onAddItem()">AddSensor</button>
      </div>

TS：

格式数组： 'sensors_id': this.fb.array([], Validators.required),

  updateForm(ev: …

我想从数据库中获取一个值,并将其设置为自动完成输入框中的默认值.

填充clientTypes

clientTypes: any[] = [];
getClientTypes() {
    this.clientService.getClientTypes()
    .subscribe((data: any) => {
        this.clientTypes = [...data];
    });
}

用于自动完成显示

displayFn(object): string {
    console.log(object.ClientTypeId);
    return object.Name;
}

在HTML中

<mat-form-field appearance="outline">
    <mat-label>Client Type</mat-label>
    <input type="text" placeholder="Select Client Type" aria-label="Number" matInput formControlName="clienttype"  [formControl]="clientTypeControl" [matAutocomplete]="auto3">
    <mat-autocomplete #auto3="matAutocomplete" [displayWith]="displayFn" (optionSelected)='setClientTypeId($event.option.value)'>
        <mat-option *ngFor="let clientType of clientTypes" [value]="clientType">
            {{ clientType.Name }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>
<br>

当我使用编辑时,我从数据库中获取保存的accountTypeId.我的问题在于如何将获取的accounTypeId作为默认选项放入matautocomplete中,但仍然可以获得其余的选项？

谢谢.

我允许用户动态创建输入字段。对于每个输入字段，我想将其连接到不同的 mat-autocomplete，以便它们彼此独立工作。我在这里遇到了障碍，因为我无法动态创建将自动完成连接到输入的元素引用（此处为#auto）。我该如何实现这一目标？

<div
  class="row"
  *ngFor="let field of getControls('requestFields'); let i = index"
  formArrayName="requestFields"
>
  <ng-container [formGroupName]="i">
    <div class="col-md-4">
      <mat-form-field class="example-full-width">
        <input
          type="text"
          placeholder="Name"
          matInput
          formControlName="reqName"
          matAutocomplete="auto"
        />
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option
            *ngFor="let option of (filteredColumns | async)"
            [value]="option"
          >
            {{ option }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
    <div class="col-md-2">
      <div class="togglebutton">
        <label>
          <span>Optional</span>
          <input type="checkbox" formControlName="reqOption" />
          <span class="toggle"></span>
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <mat-form-field>
        <input
          matInput
          formControlName="reqValidations"
          placeholder="Validation"
          type="text"
        />
      </mat-form-field>
    </div>
  </ng-container>
</div>

这是我的html，其中包含材料自动完成功能。

<ng-container *ngSwitchCase="'autocomplete'">
    <div [ngClass]="(filter.cssClass || 'col-md-4') + ' mt-2 pt-1'">
        <div class="filter-key-label">
            {{filter.columnTitle}}
        </div>
        <div class="filter-form-control d-flex flex-wrap justify-content-left">
        <mat-form-field class="full-width">
            <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" ng-model="blah">
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                {{ option }}
                </mat-option>
            </mat-autocomplete>
            </mat-form-field>
        </div>
    </div>
</ng-container>

目前，我只能使用来检测选择更改，onSelectionChange但是无法检测到该字段最初是否为空，或者在选择了某个项目然后将其删除后是否为空，因此我什么也不会选择，也不会将焦点移到输入字段之外。

如何检测到？

我尝试过onkeypress，ng-change再加上ng-model（不确定如何使用），change但是没有任何效果。库是否已经提供了某些规定，或者我们检测到更改并输入了字段值？

我正在使用Angular 6和Angular Material.我试图从mat-chip和自动完成中保存所选对象或所选对象列表.我能够将字符串值发送到fruits []数组,但无法将所选对象发送到fruits []数组.请帮我找一个解决方案.谢谢.

我的演示项目链接:stackblitz上的演示代码

我使用 mat-autocomplete 来过滤我的数据。一切正常，但我想要一个下拉箭头来显示输入中的所有选项。在 md-autocomplete 中，我们可以使用dropdown-arrow="true"但在 mat-autocomplete 中不支持它。那么如何在 mat-autocomplete 中添加下拉箭头呢？这是我的component.ts

<form class="example-form">
    <mat-form-field class="example-full-width">  

    <input type="text" aria-label="Number" matInput 
    [formControl]="myControl" [matAutocomplete]="auto4"
    [hidden]="loadWithFilters&&loadWithFilters.field==='IP'">  

    <mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true" 
    (optionSelected)="onFilterOptionSelected($event,'IP')" >  

    <mat-option *ngFor="let option of filteredIP | async" 
    [value]="option.key">
        {{option.value}}
    </mat-option>
   </mat-autocomplete>  
   </mat-form-field>
</form>