Question

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

选择一个选项时，我会看到其ID，而需要看到名称。 ID用于事件发射器和后端-我尝试使用[displayWith]，但在函数内部，我仍然仅获得ID，而不获得可以映射的整个对象。
我希望能够过滤结果，但是我有可以没有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]中传递整个对象，但仍需要过滤方面的帮助。

角度材料-自动填充-按组过滤结果

0 个答案: