Topic: Mdb-select component not updated
Expected behavior
content of the select element should be updated after dynamically adding new values
Actual behavior
When dynamically inserting values into the element, e.g. as follows: <mdb-option * ngFor = "let cart of cartList" [value] = "cart.uuid"> {{cart.poreference}} - the content of the elements is not updated when the content of the "cartList" variable is changed, this is done only after clicking on select.
Resources (screenshots, code snippets etc.)
https://recordit.co/FpL9MJopcs
.HTML
<div class="w-25">
<mdb-form-control>
<mdb-select [(ngModel)]="selectedCart" (ngModelChange)="onSelectedCartChange($event)">
<mdb-option *ngFor="let cart of cartList" [value]="cart.uuid">{{cart.poreference}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">{{ 'CART' | translate }}</label>
</mdb-form-control>
<div>
<button (click)="test()">test</button>
</div>
</div>
.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nothing-to-show',
templateUrl: './nothing-to-show.component.html',
styleUrls: ['./nothing-to-show.component.scss']
})
export class NothingToShowComponent implements OnInit {
cartList: any[] = [
{uuid: 1, poreference: 'cart1 (0)'},
{uuid: 2, poreference: 'cart2 (0)'},
{uuid: 3, poreference: 'cart3 (0)'},
{uuid: 4, poreference: 'cart4 (0)'},
];
selectedCart = 1;
index = 0;
constructor() { }
ngOnInit(): void {
}
onSelectedCartChange(e) {
this.selectedCart = e;
}
test() {
this.index++;
for(let item of this.cartList) {
item.poreference = String(item.poreference).substring(0, String(item.poreference).indexOf('(')) + '(' + this.index + ')';
}
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.0.0
- Device: Macbook
- Browser: Chrome, Safari, etc.
- OS: Mac OS Big Sur
- Provided sample code: Yes
- Provided link: Yes
Arkadiusz Idzikowski staff commented 1 year ago
@norbertbede Could you provide more information about the problem and reproduction steps? I tried to recreate the problem on our end but without success, the options list is correctly updated when a new option is added to the array used in the ngFor directive. Do you use OnPush change detection in your component?
norbertbede premium commented 1 year ago
We do not use OnPush change detection in the component. Angular reacts to the change but the component doesn't react, only when you click on it. We use the following code, maybe you could reproduce the problem with this:
There is also a video about it: https://recordit.co/JH5toMFM4S - here we deleted a product in the cart which should have reduced the number in brackets to 2
Arkadiusz Idzikowski staff commented 1 year ago
@norbertbede How is the number in the bracket generated/updated in this case? Could you please edit the first post and provide a simple HTML/TS code demo with fake data so we can use a complete example on our end?
We need more information on what exactly happens in the TS code when you add/delete the items. We tried to dynamically add/remove select options and check how it affects the list of options and selected value, but we could not find any problems in the select component.
norbertbede premium commented 1 year ago
@Arkadiusz Idzikowski the requested code was added above. thanks fror help. n
Arkadiusz Idzikowski staff commented 1 year ago
@norbertbede Thank you, it was very helpful. We previously also updated the options list after changing the label which probably triggered change detection and updated the list.
Unfortunately, we currently don't have a listener that will allow us to detect the change in options label, I added that to our to-do list and we will fix that as soon as possible.
As a workaround for now you can try to call the
setDisabledStatemethod after the change in options labels:this.select.setDisabledState(false). You can read more on how to use component methods in our documentation: https://mdbootstrap.com/docs/b5/angular/forms/select/#docsTabsAPIIt is not the cleanest solution but it will allow you to trigger component change detection and update options list.