Looking to display a list in a dropdown using Angular. Here's what I've tried:
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>
The dropdown is showing up empty. Can anyone pinpoint where the issue might be?