Скопируйте строку из MatToggleButton в поле ввода Angular 5 Autocomplete - PullRequest
Новая
       30

Скопируйте строку из MatToggleButton в поле ввода Angular 5 Autocomplete

0 голосов
/ 07 июня 2018

Я новичок в angular, поэтому надеюсь, что это не так уж очевидно.

Краткое описание: Я пытаюсь скопировать строку в поле формы автозаполнения углового материала, щелкнув кнопку MatToggleButton.Пока мне удалось изменить значение базовой модели, но не строку, отображаемую в поле.Если в автозаполнении ничего не было выбрано и я нажимаю кнопку, текст копируется.Если между автозаполнением выбрано что-то промежуточное, я не получаю отображаемый текст ввода.

Длинное описание: я попытался выполнить следующее, чтобы заполнить автозаполнение с помощью MatButtonToggleChange.Выборы в списке происходят от Solr-Server in Production, поэтому интерфейс для 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;
}

Я что-то упустил?Как скопировать строку в автозаполнение?

Плункер: https://plnkr.co/edit/jPtSpZ?p=info

1 Ответ

0 голосов
/ 08 июня 2018

Ваш plunkr не работает.И у тебя есть ошибки.Дело имеет значение: #searchField и @ViewChild('SearchField') не совпадают.У вас есть только одна кнопка переключения, поэтому ее можно нажимать только один раз (без возможности выключить).

Что касается вашей проблемы - имейте в виду, что установка значения элемента управления формы в строку не приводит к выбору из автозаполнения - вы должны сами это сделать, установив соответствующее значение элемента управления формы Documentэлемент списка, а не текст.Это может означать выполнение ручного поиска, если кнопка представляет текст, или может быть лучше связать объект Document непосредственно с кнопкой.

Другая общая проблема заключается в том, что ввод в поле ничего не делает.Предполагается, что автозаполнение фильтрует / ищет элементы на основе введенного текста, но вы не реализовали это.

...