在Angular中如何将普通的输入框换成下拉框呢

为了方便描述这里只截取代码的部分片段：比如将国家这个字段由输入转成下拉框
 

            <div class="row">
              <label for="country"
                     class="col-md-3 form-control-label required-label"><span class="asterisk">*</span>Country:</label>
              <div class="col-md-9">
                <select style="height: 34px;" class="col-md-5 form-control" id="country" name="country" formControlName="country">
                  <option *ngFor="let country of countries"
                          [value]="country">
                    {{ country }}
                  </option>
                </select>
              </div>
            </div>

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DialogService } from '../../service/dialog.service';
import {UtilService} from '../../service/util.service';

@Component({
  selector: 'app-create-client',
  templateUrl: 'create-client.component.html'
})

export class CreateClientComponent {
  
  countries: string[] = [];

  constructor(private fb: FormBuilder, route: ActivatedRoute, dialogService:             
  DialogService, utilService: UtilService) {
   
  // 请求后端得到所有的countries，并且将得到的countries数组赋值给这里的countries数组变量
    this.utilService.getCountries().subscribe(
      (countries: string[] ) => this.countries = countries);
  }
}

对应的spec文件
 

import {HttpClientModule, HttpResponse, HttpResponseBase} from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { DialogService } from '../../service/dialog.service';
import { CreateClientComponent } from './create-client.component';
import {UtilService} from '../../service/util.service';

describe('CreateClientComponent', () => {
  const states = ['AL', 'AK', 'AZ', 'AR', 'CA'];
  const countries = ['United States', 'Canada'];
  beforeEach(async(() => {
    class RouterStub {
      navigate(args: string[]) {
        return true;
      }
    }

    class LocationStub {
      back() {
        return true;
      }
    }

    class DialogServiceStub {
      openDialog(isSuccess, title, msgs, leftBtn, rightBtn) {
        return Observable.of('OK');
      }
    }

    class UtilServiceStub {
        getCountries() {
          return Observable.of(countries);
        }
       
    }

    TestBed.configureTestingModule({
      imports: [RouterModule, FormsModule, ReactiveFormsModule, HttpClientModule],
      declarations: [CreateClientComponent],
      providers: [
        {provide: Router, useClass: RouterStub},
        {provide: Location, useClass: LocationStub},
        {
          provide: ActivatedRoute, useValue: {
            queryParams: Observable.of(
              [
                {'profileId': 1},
                {'parentOrganizationId': 1},
                {'clientId': 1}
              ]
            )
          }
        },
        {provide: DialogService, useClass: DialogServiceStub},
        {provide: UtilService, useClass: UtilServiceStub},
        Regex
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents();


  }));

  it('should create CreateClientComponent', () => {
    const fixture = TestBed.createComponent(CreateClientComponent);
    const comp = fixture.debugElement.componentInstance;

    expect(comp).toBeTruthy();
  });

  
  it('should show correct country items', async(() => {
    const fixture = TestBed.createComponent(CreateClientComponent);
    const comp = fixture.debugElement.componentInstance;
    expect(comp.countries.length).toEqual(countries.length);
    expect(comp.countries).toEqual(countries);
  }));
});