Dropdown list data binding in Angular 6

[Muhammad Fiqih Firdiansyah]

Hello

I use Angular 6 and found a problem when i want to binding list array to dropdownlist, this is my code

*HTML

<label for="busType">Bus Type <span class="required">*</span></label>

                       <select id="busType" name="busType" class="form-control" placeholder="Bus Type" [(ngModel)]="masterData.modalForm.busType" required>

                           <option value="0">Please select</option>

                           <option ngForOf="let b of busType_List">{{b}}</option>

                       </select>

*typescript

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

import Swal from 'sweetalert2/dist/sweetalert2.js'

@Component({

 templateUrl: 'bus.component.html'

})

export class BusComponent {

 public largeModal;

 

 masterData = {

   listData: [],

   busType_List: [

     {

       id: 1,

       name: "Executive"

     },

     {

       id: 2,

       name: "Ekonomi"

     },

   ],

   modalForm: {

     busName: '',

     busType: '',

     busSeat: 0,

     busClass: '',

   }

 }

  constructor() { }

}

and this is the result

Is there something wrong with my code? please explain to me

Thank you

*sorry for my bad english

[Sander Elias]

Hi Muhammad,

How do you expect the `option` to figure out what to display, and what its value is?

try:

<option ngForOf="let b of busType_List" [value]="b.id">{{b.name}}</option>

Regards

Sander