无法在ngForm中初始化ng-select。

Question

我使用的是Angular 9，并且这个表单有一个选择。这个select是一个国家列表。我可以在控制台中看到国家列表。

<div class="card mb-5">
  <div class="card-body">
    <aw-wizard #companyCreationWizard>
      <aw-wizard-step stepTitle="{{ 'company.wizard-information' | translate }}" style="min-height: 120px;">

        <form #companyCreationForm="ngForm" novalidate  (ngSubmit)="onSubmit()">

          <div class="row">
            <div class="col-6">
              <label class="form-group has-float-label">
                <input class="form-control" required ngModel #name="ngModel" name="name"/>
                <span>{{ 'company.name' | translate }}</span>
                <div *ngIf="!name.valid && registerForm.submitted" class="invalid-tooltip">Name is required!</div>
              </label>
            </div>
            <div class="col-6">
              <label class="form-group has-float-label">
                <ng-select [items]="countries" bindLabel="name" name="countryCode" bindValue="countryCode" [(ngModel)]="selectedCountryCode">
                </ng-select>
                <span>{{ 'company.country' | translate }}</span>
              </label>
            </div>
          </div>

          <div class="justify-content-between align-items-center">
            <app-state-button [btnClass]="'btn btn-primary btn-lg btn-shadow wizard-button-right'" [currentState]="buttonState"
                              [isDisabled]="buttonDisabled" click="onLoginClick()">
              {{ 'company.create' | translate | uppercase }}
            </app-state-button>

          </div>
        </form >
      </aw-wizard-step>
    </aw-wizard >
  </div>
</div>

当我尝试注入数据来初始化ng-select时，我的列表中没有任何数据，我的组件文件看起来是这样的。

export class CompanyCreationComponent implements OnInit {

  @ViewChild('companyCreationForm') registerForm: NgForm;

  countries: Country[];
  selectedCountryCode = 'FR';

  constructor(
    private authService: AuthService,
    private contryService: CountryControllerService) {

    this.contryService.findAllCountriesUsingGETResponse().subscribe({
      next(countriesResponse) {
        console.log(countriesResponse.body); // I have a list of countries here
        this.countries = countriesResponse.body;
      },
      error(error) {
        console.log(error);
      }
    });

  }

我的国家列表看起来像:

[
    {
      "countryCode": "AD",
      "name": "Andorra",
      "indicatif": "+376"
    },
    {
      "countryCode": "AE",
      "name": "United Arab Emirates",
      "indicatif": "+971"
    },
    {
      "countryCode": "AF",
      "name": "Afghanistan",
      "indicatif": "+93"
    },
    {
      "countryCode": "AG",
      "name": "Antigua and Barbuda",
      "indicatif": "+1268"
    },
    {
      "countryCode": "AI",
      "name": "Anguilla",
      "indicatif": "+1264"
    }...]

我做错了什么？ 先谢谢你。

Answer 1

问题是由于我如何获得响应。用Angular 9，我应该使用像这样的observable 。

  ngOnInit() {

    this.contryService.findAllCountriesUsingGETResponse().subscribe(
      (countriesResponse) => {
        this.countries = countriesResponse.body;
      },
      (error) => {
        this.notifications.create(
          'Error',
          error.message,
          NotificationType.Error,
          { theClass: 'outline primary', timeOut: 6000, showProgressBar: false }
        );
        this.buttonDisabled = false;
        this.buttonState = '';

      });
  }