CODEWITHSUNDEEP
htmlangulardropdown
Gregor Jurewicz
Gregor Jurewicz

Reputation: 1

Angular: Fill Dropdown with Database

I'm new in coding and wanted to make a small Raid Planner. Now I try to fill my Dropdown with the Raidnames from my database and could need some help with this step. I have problems with adding the data in a dropdownlist.

raid.service.ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { RaidItem } from 'src/app/classes/raid-item';
import { environment } from './../environments/environment';
import { publishReplay, refCount } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class RaidService {

  constructor(private httpClient: HttpClient) { }
  private raidApiUrl = environment.webApiBaseUrl + '/api/Raid/';

  getRaids(): Observable < RaidItem[] > {
    return this.httpClient.get < RaidItem[] > (this.raidApiUrl + 'GetRaids').pipe(
      publishReplay(1),
      refCount());
  }
}

raid.item.ts

export class RaidItem {
    Id: number;
    Name: string;
}

edit.component.ts

import { Component, OnInit } from '@angular/core';
import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateStructAdapter } from '@ng-bootstrap/ng-bootstrap/datepicker/adapters/ngb-date-adapter';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
import { RaidService } from 'src/services/raid.service';
import { RaidItem } from '../classes/raid-item';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})

export class EditComponent implements OnInit {
  time = {hour: 13, minute: 30, second: 0};
  hourStep = 1;
  minuteStep = 15;
  model: NgbDateStruct;
  date: {year: number, month: number};
  raidItems: RaidItem[] = [];

constructor(private calendar: NgbCalendar, private raidService: RaidService) { }
  ngOnInit() {
    this.raidService.getRaids().subscribe(raidResult => {
      this.raidItems = raidResult;
    });
  }
 selectToday() {
    this.model = this.calendar.getToday();
  }

  onSubmit() {
  }

}

edit.component.html With this step I have the most problems. Don't know exactly how to get the raidnames into the dropdown

<div class="container1">
    <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
</div>
<div class="container2">
    <ngb-timepicker [(ngModel)]="time" [seconds]="false"
    [hourStep]="hourStep" [minuteStep]="minuteStep" [secondStep]="00"></ngb-timepicker>
</div>

<select formControlName="raids" id="raids">
    <option *ngFor="let RaidItem of getRaids(); let i = index" [value]="getRaids[i].Name">
        {{getRaids[i].Name}}
    </option>
</select>

Upvotes: 0

Views: 743

Answers (2)

Tschareck
Tschareck

Reputation: 4239

NgFor already provides alias to each iteration, which in your case is RaidItem. getRaids is a method, but you tried to use it like a variable.

This should work:

<select formControlName="raids" id="raids">
    <option *ngFor="let RaidItem of getRaids(); let i = index" [value]="RaidItem.Id">
        {{RaidItem.Name}}
    </option>
</select>

Upvotes: 0

uiTeam324
uiTeam324

Reputation: 1245

You already stored your output in raidItems inside the compoent. SO don't need to call function from template. Use variable to construct the loop.

<option *ngFor="let raidItem of raidItems" [value]="raidItem.Name">
    {{raidItem.Name}}
</option>

Upvotes: 1

Related Questions