标签: mat-autocomplete

我在一个页面上有多个自动完成功能，可以选择值并保存它们。我需要的是，当我下次加载页面时，默认情况下应该为已经选择和保存的值显示预先选择的值。

以下是代码片段-

<ng-container matColumnDef="course">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Course Section </th>
      <td mat-cell *matCellDef="let course"> {{course.courseSection}}
      <mat-form-field>
          <input type="text" id="{{course.courseSection}}" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged(course.courseSection, $event)">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </td>
    </ng-container>

在 ngOnInit 上，我能够获取保存在地图中的值，并且使用了以下不起作用的逻辑 -

checkAssigned(section: string) {
    if (this.assigned.has(section)) {
      return this.assigned.get(section);
    } else {
      return '';
    }
} 

html -

<mat-option *ngFor="let option of filteredOptions | async" 
[value]="checkAssigned(course.courseSection)===''? option : checkAssigned(course.courseSection)">

但它不起作用。关于如何实现它的任何建议？

我正在使用 Mat-Autocomplete，但由于某种原因，它仅在我使用 1 个字段时才有效，当我添加另一个第二个字段时，会发生一些奇怪的事情。

在字段 1 和字段 2 中，我在下拉列表中得到相同的选项，这些选项是仅在我编辑字段 2 时才可用的选项。

甚至有可能有超过 1 个领域，我从来没有看到任何关于这个问题的例子。

场1

<div class="col input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Sender</span>
  </div>
  <mat-form-field>
  <input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[sender]" [ngModelOptions]="{standalone: true}">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let document of documents" [value]="document._source.field.Sender">
      <span>{{document._source.field.Sender}}</span>
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>
</div>

场2

    <div class="col input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Receiver</span>
  </div>
  <mat-form-field>
    <input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[receiver]" [ngModelOptions]="{standalone: true}" >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let document of documents" [value]="document._source.field.Receiver">
        <span>{{document._source.field.Receiver}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field> …

This works with a regular datalist element where the list="target" on the input element can find the id="target" in the child component. I am trying to figure out a way to do this with the material autocomplete component.

Using a regular datalist element

parent.component.html

 <input type="text" list="target">
 <app-child></app-child>

child.component.html

<datalist id="target">
    <option *ngFor="let option of options" [value]="option.name"></option>
</datalist>

I have been trying to implement this feature all day I usually get one of two errors:

Error: Attempting to open an …

当我在下面的 matAutocomplete formControl 中选择一个项目时，我总是得到 ID，而不是下拉列表中显示的值。

当我将 [value]="baseCoin.ID" 更改为 [value]="baseCoin.Abbr" 时，当我选择一个项目时会显示正确的字符串，但是，我需要 (ngModelChange) 事件将 baseCoin.ID 返回到一个方法，而不是 baseCoin.Abbr。

<mat-form-field>
    <input matInput placeholder="Base Coin" aria-label="Base Coin" [matAutocomplete]="basecoin" [formControl]="baseCoinCtrl" [(ngModel)]="newTrade.BaseCoin.Abbr" (ngModelChange)="populateMarketCoins( $event )">
    <mat-autocomplete #basecoin="matAutocomplete">
        <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin.Abbr">
            {{baseCoin.Abbr | uppercase}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

我错过了什么吗？

帮助表示赞赏。谢谢。

我正在使用angular 4的芯片组和自动完成功能来开发stackoverflow中的标记系统等功能。这是我写的代码。没用

<mat-form-field class="col-md-4 col-md-offset-2">
                  <mat-chip-list #chipList>
                    <mat-chip *ngFor="let item of displayItems" [selectable]="selectable"
                             [removable]="removable" (remove)="remove(item)">
                      {{item}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="Enter Items..."  
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="addOnBlur"
                           (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>

                           <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let option of options" [value]="option">
                                    {{ option }}
                                </mat-option>
                            </mat-autocomplete>

                  </mat-chip-list>
                  <mat-hint align="end">Press comma or enter after each selection</mat-hint>
                </mat-form-field>

以下是TS文件：选项基本上是从中选择自动完成的。

snacksType: String[];

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  options=['banana','apple','jackfruit','mango', 'grapes', 'kiwi'];
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  displayItems = []; …

我正在使用 mat 自动完成。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

想知道是否有一种方法可以限制用户只能输入下拉列表中提供的选项，即。仅一、二和三。当用户键入诸如十六之类的其他内容时，不应显示它

 export class AutocompleteSimpleExample {
  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
   ];

}

根据MatAutocomplete 文档，有一个classList输入可以设置面板的样式。

@Input('class') classList: string | 细绳[]

获取在主机 mat-autocomplete 元素上设置的类，并将它们应用到覆盖容器内的面板，以便轻松设置样式。

当我这样做时，<mat-autocomplete #auto="matAutocomplete" classList="test-class">我希望我会看到添加到 mat-autocomplete-panel 的测试类？但这不起作用。

有人可以解释一下如何使用这个输入吗？

闪电战

如何以角度模板驱动形式使用垫自动选择来设置过滤器。

<mat-form-field class="pl">
    <input matInput name="item_id" 
    [(ngModel)]="stock.item_id" 
    #item_id="ngModel" 
    placeholder="Item"           
    [matAutocomplete]="auto" required>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="valueMapper">
        <mat-option *ngFor="let item of itemsData" [value]="item.id">
        {{item.text}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

请参阅 stackblitz 示例：单击此处

我在 Angular 项目中有自定义 Mat Auto Complete。它有 2 个后缀：清除按钮和下拉按钮。当我单击清除按钮时，代码this.myControl.reset('', { emitEvent: true });会重置输入值。但下拉面板打不开。我尝试使用以下格式但没有成功

1. this.myControl.reset();
2. this.myControl.reset（''，{emitEvent：true}）；
3. this.myControl.patchValue('');

StackBlitz 演示

自动完成显示示例.ts

.......

 clearInput() {
    this.arrowIcon = "arrow_drop_down";
    this.myControl.reset('', { emitEvent: true });
  }

......

自动完成显示示例.html

<form class="example-form">
 <mat-form-field class="example-full-width">
   <mat-label>Assignee</mat-label>
   <input
     type="text"
     matInput
     [formControl]="myControl"
     [matAutocomplete]="auto"

   />
   <div matSuffix style="display:flex">
     <button
       *ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
       mat-icon-button
       aria-label="Clear"
       (click)="clearInput()"
       type="button"
     >
       <mat-icon>clear</mat-icon>
     </button>

     <button mat-icon-button aria-label="Clear" type="button">
       <mat-icon>{{arrowIcon}}</mat-icon>
     </button>
   </div>

   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
     (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
     <mat-option *ngFor="let option of filteredOptions | …

假设对象数组，

books = [{id:1, name: 'book1'}, {id:2, name: 'book2'}];

在这里可以看到数组中每个元素的id都是一个数字。当对象数组为给定格式时，Angular 自动完成组件不起作用。任何解决方法？如何使用书的ID自动完成？