Отображение массива в качестве опций выбора из TS

Question

Я импортировал файл json и создал функцию как таковую в моем файле ts

constructor(...) {

  this.getCountry().subscribe(data => {
    this.countries = [data];
    console.log(this.countries);
  });
}
...

getCountry(): Observable<any> {
  return this.http.get("../../../../assets/json/sys_country.json");
}

this.countries, который очень хорошо отображал массив, хранящийся в моем файле json, но при вызове в html в виде раскрывающегося списка. выберите, что это ничего не показывает.

это было, как я установил свой HTML

<mat-form-field>
  <mat-select placeholder="Country" formControlName="country">
    <mat-option *ngFor="let country of countries" [value]="country.name">
      {{country.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

, и вот как файл json выглядит как

[
  {
    "name": "Afghanistan",
    "topLevelDomain": [
      ".af"
    ],
    "alpha2Code": "AF",
    "alpha3Code": "AFG",
    "callingCodes": [
      "93"
    ],
    "capital": "Kabul",
    "altSpellings": [
      "AF",
      "Afġānistān"
    ],
    "region": "Asia",
    "subregion": "Southern Asia",
    "population": 27657145,
    "latlng": [
      33.0,
      65.0
    ],
    "demonym": "Afghan",
    "area": 652230.0,
    "gini": 27.8,
    "timezones": [
      "UTC+04:30"
    ],
    "borders": [
      "IRN",
      "PAK",
      "TKM",
      "UZB",
      "TJK",
      "CHN"
    ],
...

, которыйЯ извлек из https://jsonblob.com/a11e0a0a-d4ff-11e9-9035-fd9e94f77336

, но на дисплее выберите выпадающие, чтобы ничего не показывать.

Answer 1

Вы уже получаете массив из запроса, просто измените свой код на

 this.getCountry().subscribe(data => {
    this.countries = data;
    console.log(this.countries);
  });

Answer 2

Вы уже получили массив из вашего файла json. измените эту строку: this.countries = [data];to this.countries = data;