Question

我是棱角分明的新人，所以我希望这不是很明显。

简短说明：我试图通过单击MatToggleButton将字符串复制到Angular Material Autocomplete Formfield。到目前为止，我设法更改了基础模型的值，但没有更改字段中显示的字符串。如果未从自动完成中选择任何内容，则按下按钮，文本将被复制。如果从自动完成中选择了某些内容，我不会显示输入的文本。

详细说明：我尝试使用MatButtonToggleChange填写自动填充功能。列表中的选择来自生产中的Solr-Server，因此是Document的接口和示例Results的结构。当选择自动完成中的值时，它会返回一个对象而不是一个字符串，因此displayFn函数会提取字符串类型标签并显示它。我试图重载该函数以接受字符串，但这也没有帮助。

HTML

<div class="example-btn-list">
  <mat-button-toggle-group (change)="fillExample($event)">
    <mat-button-toggle class="example-buttons" *ngFor="let example of exampleQueries" selected="false" [value]="example">
     {{example.searchTerm}}
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>

<div class="container">
  <mat-form-field class="example-full-width" hintLabel="Enter some Art related input">
    <input #searchField matInput placeholder="Art Search Term" aria-label="Search Field" [matAutocomplete]="auto" [formControl]="searchCtrl">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let result of Result" [value]="result">
        <small>Type: {{ result.type }}</small> &nbsp;
        <span>{{ result.label }}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

app.component.ts

import { Component, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
import { FormControl, NgControl } from '@angular/forms';
import { MatInput, MatAutocompleteSelectedEvent, MatButtonToggleChange } from '@angular/material';
import { Document } from './app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  title = 'Autocomplete Minimal Example';

  constructor( ) { }

  public exampleQueries = [
    {
      ptType: 'Painting',
      type: 'painting',
      searchTerm: 'Odalisque with Slave'
    }
  ];


  public Result = [
    {
      'type': 'painting',
      'label': ['Grande Odalisque'],
    },
    {
      'type': 'painting',
      'label': ['Odalisque with Slave'],
    },
  ];

  public searchCtrl: FormControl = new FormControl();

  @ViewChild('SearchField')
  public SearchField: ElementRef;

  public displayFn( document?: string | Document): string | undefined {
    if ( document && typeof document === 'object') {
    return document ? document.label : undefined;
    } else if ( typeof document === 'string') {
      return document;
    }
  }


  public fillExample(e: MatButtonToggleChange): void {
    this.searchCtrl.setValue(e.source.value.searchTerm);
    console.log(e.source.value.searchTerm);
    this.SearchField = e.source.value.searchTerm;
    console.log(this.SearchField);
  }

}

app.ts

export interface Document {
  type: string;
  label: string;
}

我错过了什么吗？如何将字符串复制到自动填充？

Plunker：https://plnkr.co/edit/jPtSpZ?p=info

Answer 1

你的傻瓜不会跑。你有错误。案例问题：#searchField和@ViewChild('SearchField')不匹配。您只有一个切换按钮，因此只能按一次（无法取消切换）。

至于您的问题 - 请记住，将表单控件值设置为字符串不会导致从自动填充中进行选择 - 您必须通过将表单控件值设置为匹配的Document列表来自行管理它项目不是文本。这可能意味着如果按钮表示文本，则进行手动搜索，或者将Document对象直接与按钮关联可能更好。

另一个整体问题是输入字段什么都不做。自动填充应该根据输入文本过滤/搜索项目，但您尚未实现此目的。

将MatToggleButton中的字符串复制到Angular 5自动完成输入字段

1 个答案: