如何将我的数据库中的数据放入angular中的select

Question

我想让用户能够选择他们预先输入的电子邮件，但是当我使用ng-options并且我尝试了ngFor，但它似乎仍然不起作用，我做错了吗？

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;
    });
  }      

}

Answer 1

我喜欢在我的代码中使用angular js2中提供的*ngfor。

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

我认为需要将value="{{recipient.email}}"替换为接收方Id，因此它将类似于value="{{recipient.Id}}"

Answer 2

你把angularjs和angular语法搞混了，应该是，

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

Answer 3

或者，您可以创建一个自定义指令，如*ngFor。

也就是说，实现我自己的能够遍历ES6可迭代对象的ngFor指令。