CODEWITHSUNDEEP
angular
KUROYUKI
KUROYUKI

Reputation: 123

How to put data from my database into select in angular

I want to allow the user to be able to choose their email that has been entered beforehand but when I used ng-options and I have tried ngFor but it still doesn't seem to work, did I do it wrong or something?

transfer.component.html 

<form (ngSubmit)="transFunds()" >
  <div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
          <select [ngModel]="selectedName" (ngModelChange)="updateSelectedValue($event)">
              <option *ngFor ="let recipient of recipients" value="{{recipient.emailTo}}">{{recipient.emailTo}}</option>
        </select>
        </div>  
    </div>
    <div class="row">
        <div class="row">
          <p><input type="number"  placeholder="Amount Transfering" [(ngModel)]="amount"></p>
        </div>  
      </div>  
     <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <p><button class="btn btn-primary" type="submit">Send</button> </p>    
      </div>
    </div>
   </div>
  </form>

transfer.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Http } from '@angular/http';
import { PostsService } from '../posts.service';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.component.html',
  styleUrls: ['./transfer.component.css']
})
export class TransferComponent implements OnInit {

  constructor(private fb: FormBuilder, private http: Http, private router: Router, private auth: AuthService,private postsService: PostsService) { }
  transfer = {};
  recipients: any;
  transferForm: FormGroup;
  public userEmail: string;

  ngOnInit() {
    this.transferForm = this.fb.group({
      emailTo: '',
      amount: ''
    });
    this.auth.currentEmail.subscribe(email => this.userEmail = email);

    this.postsService.getAllRecipient().subscribe(recipient => {
      this.recipients = recipient;
    });
  }      

}

Upvotes: 0

Views: 331

Answers (3)

Pranay Rana
Pranay Rana

Reputation: 176896

i do like this in my code , make use of *ngfor available in angular js 2 

<select [(ngModel)]="selectedName"="selectedName"   
    (ngModelChange)="updateSelectedValue($event)">
        <option *ngFor ="let recipient of recipients" 
           value="{{recipient.email}}">{{recipient.email}}</option>
</select>

I think value="{{recipient.email}}" is need to be replace by Id of receipient so it will be like value="{{recipient.Id}}"

Upvotes: 0

user9077519
user9077519

Reputation:

or you can create a custom directive like *ngFor.

that is to implement my own ngFor directive that would be capable of iterating through ES6 iterables.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222572

You are mixing up angularjs and angular syntax, it should be,

 <select class="form-control" name="someDrpDown" [(ngModel)]="selectedName">
        <option *ngFor="let recpient of recipients" [ngValue]="recipient">
          {{recpient.email}}
        </option> 
  </select>

Upvotes: 1

Related Questions