How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database?
Below is the HTML code:
<router-outlet></router-outlet>
<hr>
<div class="row">
<div class="col-xs-12">
<form [formGroup]="catSelection">
<select formControlName="transactionControl">
<option [ngValue]="transaction" *ngFor="let transaction of transactions">{{transaction.category}}</option>
</select>
</form>
</div>
</div>
And here is the TypeScript code:
export class TransactionsComponent implements OnInit {
transactions: Transaction[]
catSelection: FormGroup;
constructor(private dfService: DataFetchingService) { }
ngOnInit() {
this.catSelection = new FormGroup({
'transactionControl': new FormControl(null)})
this.loadPosts()
}
loadPosts() {
this.dfService.fetchData().subscribe(
posts=>{
this.transactions=posts;
console.log(this.transactions)
}
)
}
}
You can view a live example on Stackblitz: https://stackblitz.com/edit/angular-6ni1pg