CODEWITHSUNDEEP
angulartypescriptangular6
Peter Penzov
Peter Penzov

Reputation: 1668

Display list in dropdown

I want to display list in dropdown using Angular. I tried to implement this:

TypeScript:

Constructor

export class Merchant {
  constructor(
    public id: string,
    public name: string
  ) {}
}

Component:

import {Merchant} from "../domain/merchant";
import {MerchantService} from "../service/merchant.service";

@Component({
  selector: 'app-terminal',
  templateUrl: './terminal.component.html',
  styleUrls: ['./terminal.component.scss']
})
export class TerminalComponent implements OnInit {    
 . ..........
 constructor(private terminalService: TerminalService,
              private merchantService: MerchantService,
              private router: Router,
              private route: ActivatedRoute) {
  }      
  merchants: Merchant[];     
  ngOnInit() {       
    this.route.params.pipe(
      flatMap(params => {
        if (params['id']) {
          return this.terminalService.get(params['id']);
        } else {
          return of(null);
        }
      })
    ......   
  }    
}

HTML code:

<div class="form-group type">
    <div class="input-group-prepend">
      <label for="type">Merchant</label>
    </div>
    <select class="custom-select" name="type" [(ngModel)]="terminal" id="type" required>
      <option selected></option>
      <option [value]="type" *ngFor="let merchant of merchants">{{merchant.name}}</option>
    </select>
  </div>

I get empty dropdown. Do you have any idea where I'm wrong?

Upvotes: 0

Views: 44

Answers (1)

Lia
Lia

Reputation: 11982

you are iterating option on empty merchants array and also it's not initialized so there is no item in your select. for e,g try: 

merchants: Array<Merchant> = [{name:'test' , id:'test'}];

Upvotes: 1

Related Questions