Angular 材质自动完成过滤

Question

我有一个 json 对象，如下所示：

[
   {
      "personId":"ac9be7ef-ab23-4ed9-a77e-7e844f5ef902",
      "fullName":"X1, X1."
   },
   {
      "personId":"5a88203a-e69e-4103-bc05-b99c83f1a6cd",
      "fullName":"X2, X2"
   },
   {
      "personId":"17a39787-2122-4149-b767-d8075cd42c1a",
      "fullName":"X3, X3"
   }
]

我想使用自动完成组件来过滤掉人。

我已经这样定义了我的 formControl：

fromControl = new FormControl("", [Validators.required]);

在 html 中我是这样的

<mat-form-field appearance="outline" class="form-field">
   <mat-label>From</mat-label>
   <input type="text"
   placeholder="Type in the person name"
   aria-label="Text"
   [errorStateMatcher]="matcher"
   matInput
   [formControl] = "fromControl"
   [matAutocomplete]="auto">
   <mat-icon matSuffix>person</mat-icon>
   <mat-error *ngIf="fromControl?.hasError('required')">
      From client selection is required!
   </mat-error>
   <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let c of from" [value]="c.personId">
      {{ c.fullName }}
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

现在单击控件或过滤选项时，它将填充所有名称/过滤名称，但是，选择名称时，它将将personid放在控件中作为选定的值。

显示的值仍应为全名

这是我的 stackBlitz example

Answer 1

<mat-form-field appearance="outline" class="form-field">
   <mat-label>From</mat-label>
   <input type="text"
   placeholder="Type in the person name"
   aria-label="Text"
   [errorStateMatcher]="matcher"
   matInput
   [formControl] = "fromControl"
   [matAutocomplete]="auto">
   <mat-icon matSuffix>person</mat-icon>
   <mat-error *ngIf="fromControl?.hasError('required')">
      From client selection is required!
   </mat-error>
   <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let c of from" [value]="option.fullName">
      {{ option.fullName }} 
      </mat-option>
   </mat-autocomplete>
</mat-form-field>