Topic: Angular select component don't work partly
*_Expected behavior_*I put in my form select component with boolean values. And after emitting some values from the database I want to see some value in this component, but I see only values with the "true" values. Of course in the case of changing I must choose and send to the database a new value, its path works perfectly. But how to display the coming value with a "false" value is the secret.*_Actual behavior_*I can't display the values with the false values in the component.*_Resources (screenshots, code snippets etc.)_*This for chosen in the component if I need to change the behavior.
status = [ { value: false, status: "Archiv" }, { value: true, status: "Active" } ];
default = [ { value: false, opr: "Switch off" }, { value: true, opr: "Switch on" } ];
In the HTML file, I put select elements
<div class="md-form">
<mdb-select-2 placeholder="Choose value" label="Status"
formControlName="IsActive">
<mdb-select-option *ngFor="let option of status" [value]="option.value">{{
option.status }}</mdb-select-option>
</mdb-select-2>
<div class="md-form">
<mdb-select-2 placeholder="Choose value"
label="Status"formControlName="IsDefault">
<mdb-select-option *ngFor="let def of default" [value]="def.value">{{ def.opr }}</mdb-
select-option>
</mdb-select-2>
</div>
And in the code on subscribe I must receive the values "true" or "false" and display it accordingly in the component.
.subscribe((data) => { this.form.setValue({ IsDefault: data.isDefault, IsActive: data.isActive, });
But component display only values with "true". The values with "false" just ignore. What wrong with the component and how can I fix it problem.Thank you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Asus
- Browser: Chrome
- OS: Windows 7
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
It looks like the component treats the
false
value as null in the null check. This is something we need to fix on our end. I'm afraid that the only workaround, for now, is to map the data in arrays and convert booleanfalse
andtrue
to strings like'false'
/'true'
.