0

我正在尝试使用材料自动完成创建一个简单的下拉列表，但我卡住了。我这里有几个问题：

  1. 当我选择一个选项时，我会看到它的 id，而我需要看到 name。ID 用于事件发射器和后端 - 我尝试使用 [displayWith] 但在函数内部，我仍然只获得 ID 而不是我可以映射的整个对象。
  2. 我希望能够过滤结果，但我有没有 ID 或名称的组，但也许有一种方法可以只使用 mat-option 值进行过滤？

我的 JSON 看起来像这样：

[
  {
    "id": "",
    "name": "",
    "tableItems": [
      {
        "id": 1,
        "name": "John"
      },
      {
        "id": 2,
        "name": "Paul"
      },
      {
        "id": 3,
        "name": "Mary"
      }
    ]
  },
  {
    "id": "",
    "name": "",
    "tableItems": [
      {
        "id": 10,
        "name": "Brian"
      },
      {
        "id": 20,
        "name": "Joseph"
      },
      {
        "id": 30,
        "name": "Luke"
      }
    ]
  }
]

我的 HTML 组件如下所示：

<mat-form-field>
  <mat-label>Results</mat-label>
  <input
    matInput
    placeholder="Type to filter results"
    type="text"
    [formControl]="control"
    [matAutocomplete]="auto"
    spellcheck="false"
  >
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
    <mat-optgroup
      *ngFor="let group of groups"
      [label]="group.name"
      [class.mat-optgroup-no-label]="!group.name"
    >
      <mat-option
        *ngFor="let option of group.tableItems;"
        [value]="option.id"
      >
        {{ option.name }}
      </mat-option>
    </mat-optgroup>
</mat-autocomplete>

任何帮助，将不胜感激。

编辑：

第 1 点已解决。我没有传递整个对象，[value]但仍然需要过滤方面的帮助。

4

0 回答 0