我有一个像下面这样的 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放在控件中作为所选值。
显示的值应该还是fullName
这是我的 stackBlitz example
答案 0 :(得分:0)
<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>