mdb-select set value in table


Topic: mdb-select set value in table

SEGANTIN asked 5 years ago

Hello,

I'm not able to set the value that comes from my ListModel in mdb-select:

.ts

import { FormsModule } from "@angular/forms";

listModel = [
    { valueOptionSelect = 1, name: 'test1', ...},
    { valueOptionSelect = 1, name: 'test2', ...},
    { valueOptionSelect = 2, name: 'test3', ...},
    { valueOptionSelect = 3, name: 'test4', ...}
];

this.optionsSelect = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' }
];

.html

<tr *ngFor="let item of listModel;let i = index">
      <td>
         <mdb-select [options]="optionsSelect " placeholder="Função" name="funcao-{{i}}"         
                [(ngModel)]="selectValue">
         </mdb-select>
      </td>

Thanks


Konrad Stępień staff answered 5 years ago

Hi @SEGANTIN,

Please check this code:

<div *ngFor="let item of listModel; let i = index">
  <div>
    <mdb-select
      [options]="optionsSelect"
      placeholder="Função"
      name="funcao-{{ i }}"
      [(ngModel)]="item.valueOptionSelect"
    >
    </mdb-select>
  </div>
</div>

And TS:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  listModel = [
    { valueOptionSelect: '1'},
    { valueOptionSelect: '1'},
    { valueOptionSelect: '2'},
    { valueOptionSelect: '3'},
  ];

  optionsSelect = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ];
}

SEGANTIN commented 5 years ago

Thanks, it worked perfectly. The listModel valueOptionSelect must return a string and not a numeric


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.0
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No