angular - 从 API 中选择选项数据源

Question

我在选择输入中将数据获取到选项时遇到问题。当我在构造函数中初始化集合时，一切正常，但是当我尝试从 Web API 获取数据时，它不起作用 - 我得到了选项，但里面没有文本。

我的选择

    <select  class="mr-1 form-control"
              [(ngModel)]="selectedRate" 
              name="selectedRate" 
              required>
      <option *ngFor="let item of exchangeRateList" 
              [ngValue]="item">{{ item.rate }} ({{ item.date }})</option>
    </select>

Typescript - 使用 api - 我得到了正确数量的选项，但选项看起来像这样：

    <option _ngcontent-c11="" value="0: Object" ng-reflect-ng-value="[object Object]"> ()</option>

这是代码：

test(){ 

 this.testApiService.getCurrencyRate().subscribe(res => 
    {
      res.forEach(p => 
        this.exchangeRateList.push(p)
      );
    });     
    console.log(this.exchangeRateList);
  }

打字稿 - 没有 API - 它的工作：

      test(){   
    let currency = new Currency();
    currency.date = "testXX1";
    currency.rate = "rate5";
    let currency1 = new Currency();
    currency1.date = "testXX2";
    currency1.rate = "rate4";
    let currency2 = new Currency();
    currency2.date = "testXX3";
    currency2.rate = "rate3";
    let currency3 = new Currency();
    currency3.date = "testXX4";
    currency3.rate = "rate2";
    let currency4 = new Currency();
    currency4.date = "testXX5";
    currency4.rate = "rate1";
    this.exchangeRateList.push(currency);
    this.exchangeRateList.push(currency1);
    this.exchangeRateList.push(currency2);
    this.exchangeRateList.push(currency3);
    this.exchangeRateList.push(currency4);
    this.selectedRate = currency.date;
  }

和货币对象：

export class Currency {
  constructor(public date:string, public rate:string) {    
  }
}

编辑： ts文件：

import { Component, OnInit } from '@angular/core';
import { TestService } from '../../core/test-api/test-api.service';
import { DecimalPipe, DatePipe } from '@angular/common';

@Component({
  selector: 'app-generator',
  templateUrl: './generator.component.html',
  styleUrls: ['./generator.component.scss']
})
export class GeneratorComponent implements OnInit {
  timePeriodList:string[]=[];
  exchangeRateList:Currency[]=[];
  selectedTimePeriod:string = '';
  selectedRate:string;
  employeeId:string='';

  constructor(private testService : TestService,private datePipe: DatePipe) {

    this.initializeTimePeriods();
   }

  private initializeTimePeriods() {
    let date = new Date(Date.now());
    let year = date.getFullYear();
    let month = date.getMonth();
    for (let index = 0; index < 6; index++) {
      this.timePeriodList.push(`${year}/${month.toString().padStart(2, '0')}`);
      if (--month <= 0) {
        year--;
        month = 12;
      }
    }
  }

  ngOnInit() {
    this.test();
  }

  test(){
    this.paymentApiService.getCurrencyRate().subscribe(res => 
    {
      res.forEach(p => 
        this.exchangeRateList.push(p)
      );
    });     
    console.log(this.exchangeRateList);
    // let currency = new Currency();
    // currency.date = "testXX1";
    // currency.rate = "rate5";
    // let currency1 = new Currency();
    // currency1.date = "testXX2";
    // currency1.rate = "rate4";
    // let currency2 = new Currency();
    // currency2.date = "testXX3";
    // currency2.rate = "rate3";
    // let currency3 = new Currency();
    // currency3.date = "testXX4";
    // currency3.rate = "rate2";
    // let currency4 = new Currency();
    // currency4.date = "testXX5";
    // currency4.rate = "rate1";
    // this.exchangeRateList.push(currency);
    // this.exchangeRateList.push(currency1);
    // this.exchangeRateList.push(currency2);
    // this.exchangeRateList.push(currency3);
    // this.exchangeRateList.push(currency4);
    // this.selectedRate = currency.date;
  }
}

export class Currency {
  constructor(public date:string, public rate:string) {    
  }
}

和 HTML：

  <div class="jumbotron">
  <div class="card">
    <div class="card-header bg-success text-white"><h3>Header</h3>
    </div>
      <div class="card-body">     
        <div class="card-title">Some text</div> 
        <div class="d-flex flex-wrap align-items-baseline">
            <span class="px-1">Period</span>
            <div class="px-1">
              <select 
                [(ngModel)]="selectedTimePeriod"  
                class="mr-1  form-control" 
                name="selectedTimePeriod"  >
                  <option *ngFor="let time of timePeriodList" [ngValue]="time">{{time}}</option>
              </select>
            </div>

            <span  class="px-1">CurrencyRate</span>
            <div class="px-1">
              <select  class="mr-1 form-control"
                [(ngModel)]="selectedRate" 
                name="selectedRate">
                  <option *ngFor="let item of exchangeRateList" Value="item.date">{{ item.rate }} ({{ item.date }})</option>
              </select>
            </div>
              <button  type="button" data-ripple="" class="px-1 mr mb-sm btn btn-primary">Generate</button>
          </div>
      </div>
    </div>
</div>

控制台日志返回具有正确数据的对象。

标签： angulartypescriptasp.net-web-api

Answer 1

使用价值.rate

 <select  class="mr-1 form-control"
              [(ngModel)]="selectedRate" 
              name="selectedRate" 
              required>
      <option *ngFor="let item of exchangeRateList" 
              Value="item.rate">{{ item.rate }} ({{ item.date }})</option>
  </select>