从角度材料的自动完成中获取“id”选定值

Question

如何设置 mat-autocomplete 以获得选定的选项 ID？

<mat-form-field>
    <input type="text" matInput 
        [formControl]="autocompleteControl" 
        [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let book of books" [value]="book.id"> <!-- THIS SHOW THE ID ON THE UI -->
                {{ book.title }}
            </mat-option>
        </mat-autocomplete>
</mat-form-field>

如果我在[value]属性处将“book.title”更改为“book.id”，UI 会在自动完成输入上显示 ID，这并不好。我应该把“book.id”放在哪里，以便稍后在我的component.ts上询问他？

Answer 1

您可以使用displayWith来显示选项的特定值。

它需要一个映射函数，该函数将获取value的mat-option并返回 的显示值mat-option

试试这个：

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/**
 * @title Simple autocomplete
 */
@Component({
  selector: 'autocomplete-simple-example',
  templateUrl: 'autocomplete-simple-example.html',
  styleUrls: ['autocomplete-simple-example.css'],
})
export class AutocompleteSimpleExample {
  myControl = new FormControl('1');
  options: string[] = ['One', 'Two', 'Three'];
  books: Array<{ id: string; title: string }> = [
    { id: '1', title: 'Book 1' },
    { id: '2', title: 'Book 2' },
    { id: '3', title: 'Book 3' },
    { id: '4', title: 'Book 4' },
  ];

  getTitle(bookId: string) {
    return this.books.find(book => book.id === bookId).title;
  }

  onSubmit() {
    console.log(this.myControl.value);
  }
}

在模板中：

<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"
      [displayWith]="getTitle.bind(this)">
      <mat-option 
        *ngFor="let book of books" 
        [value]="book.id">
        {{book.title}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <button (click)="onSubmit()">Submit</button>
</form>

这是您的参考的工作示例演示代码。