Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB-Select - Cannot use ngFor

sdhakad pro asked 7 years ago


Is there any scope of using ngFor with mdb-select for the options. I have a complex object array which has to be rendered in to the options.It would be a tds task to convert that object into the MDBSelectOptions class. And assume that I have multiple select boxes in the form,it becomes very slow. Secondly,how can we mark the selected value in the mdb-select while editing a pre-filled form.

Dawid Adach pro answered 7 years ago


Dear sdhakad, material select wasn't aimed to be used with ngFor, it's recommended to prepare your data at backend side and pass it to material select options. As per selecting an option you can use ngModel :  
<div class="row">
<divclass="col-md-6">
<mdb-select [options]="dateOptionsSelect" [(ngModel)]="selectedCharacter">
placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
.ts: onInit:
dateOptionsSelect = [

{ value: '1', label: 'Today', selected: true },

{ value: '2', label: 'Yesterday' },

{ value: '3', label: 'Last 7 days' },

{ value: '4', label: 'Last 30 days' },

{ value: '5', label: 'Last week' },

{ value: '6', label: 'Last month' }

];

selectedCharacter = '1';
   

University of St Andrews pro commented 7 years ago

This solution only works with String value. Can we have the ability for it to work with number and boolean as well?

University of St Andrews pro commented 7 years ago

Modified line 238 in select.component.ts to this else if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' ) it is now working as desired. but can this please be added to the next release so we do not lose the changes on update.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags