如何顯示名稱但從 mat-autocomplete select 的對象中獲取某些其他屬性的值？ 角-角材料

Question

我花了很多時間解決這個問題，但失敗了。 我想選擇顯示名稱並獲取ID。 問題是，只要選擇了一個值，就會顯示該值的編號 (id)。 我的代碼：

          <mat-form-field class="example-full-width">
            <input
            matInput
            placeholder="Search your product"
            formControlName="id"
            [matAutocomplete] = "auto">
            <mat-autocomplete #auto="matAutocomplete" > 
                  <mat-option    *ngFor="let option of allProducts; let i = index"   [value]="option.id"   >
                {{ option.name }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>

我試圖創建一個函數 (onSelectionChange) 但無法顯示名稱並將值作為 (id)

Answer 1

好吧，您必須使用名為displayWith的自動完成輸入功能。

您可以在此鏈接中找到問題的解決方案

另外，我為您制作了一個 stackblitz 示例，以進一步簡化它。

例子

描述解決方案：

您必須向自動完成組件添加一個名為 displayWith 的輸入

<mat-autocomplete #auto="matAutocomplete" [displayWith]="checkValue">

然后在您的組件中，您必須創建函數 checkValue

checkValue(value: any) {
// here you can get your id or whatever you want
console.log(value)
}  

然后您必須將值添加到您的墊子選項中，並將您的整個對象作為值

<mat-option *ngFor="let option of options" [value]="option" >
    {{option.name}}
</mat-option>

請查看 stackblitz 示例以獲取更多詳細信息