Topic: mdb-auto-completer mdb-option value is typed to string
Expected behavior mdb-auto-completer has an attribute, displayValue, that allows you to specify a function to convert an object to a string for display with the select value.
Actual behavior This seems to work, but an error is created in typescript. I believe this is due to the value alltribute of the mdb-option being type string instead of any or string | any.
Resources (screenshots, code snippets etc.)
<input type="text"
class="completer-input form-control mdb-autocomplete mb-0"
[(ngModel)]="searchText2"
(ngModelChange)="findEmployees()"
[mdbAutoCompleter]="auto"
mdbInput
placeholder="Pick the employee" />
<mdb-auto-completer [disabled]="disabled || readonly" #auto="mdbAutoCompleter" textNoResults="No results" [displayValue]="onDisplayValue">
<mdb-option *ngFor="let option of data" [value]="option">
<div class="d-flex flex-column">
<strong>Name: {{ option.displayName }}</strong>
<small>Title: {{ option.title }}</small>
<small>Phone: {{ option.workPhone }}</small>
</div>
</mdb-option>
</mdb-auto-completer>
code behind
data: IEmployee[] = [];
onDisplayValue(employee: IEmployee): string {
console.log(employee)
return employee && employee.displayName ? employee.displayName : '';
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB4 11.1.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Related topics
Arkadiusz Idzikowski staff commented 3 years ago
@pzimmer Can you add the code of the employee interface so we can test that on our end using the exact same code?
pzimmer pro premium priority commented 3 years ago
export interface IEmployee { employeeId?: number; displayName?: string; title?: string; workPhone?: string; }
Arkadiusz Idzikowski staff commented 3 years ago
@pzimmer Thank you. We managed to find the cause of the problem. I'm afraid there is no easy workaround for now until we fix that on our end.
pzimmer pro premium priority commented 3 years ago
Thank you for working on a fix for this.