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

Add comment

Konrad Stępień staff answered 5 years ago

1 0 Best answer

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

Add comment

Write

Create snippet

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

Maycon

42Support score
4Questions 2Answers

0Snippets likes 0Snippets