Angular ng用於不顯示異步數據

Question

為什么我不能在select元素中顯示 this.countries$ 列表？

組件.ts

  countries$! : Observable<String[]>;

  constructor(private statisticService : StatisticService, private fb : FormBuilder) {

    this.getAllCountries();

  }

  getAllCountries() : void {

    this.statisticService.getAllCountries().subscribe((countries) => {
      this.countries$ = of(countries);
      console.log(countries)
    });

  }

服務中的getAllCountries方法返回一個字符串數組的 Observable：

  getAllCountries(): Observable<String[]> {
    return this.http.get<String[]>('http://localhost:8080/countries');
}

這就是我在 HTML 中呈現數據的方式：

<select>
    <option *ngFor="let cntry of countries$ | async" [value]="cntry">
        {{ cntry }}
    </option>
</select>

當我在 subscribe 方法之后使用 console.log(this.countries$) 時，會正確檢索所有國家/地區，但它們不會按應有的方式顯示在 select 元素中。 select 元素正確地顯示了 233 個選項（國家數量），但所有選項都是空白的。

我在這里錯過了什么？ 謝謝！

Answer 1

in ts file
export interface Person {
  name: string;
  place: string;
}

myself$: Observable<Person[]>;

<ul *ngIf="myself$ | async as myselfs">
   <li *ngFor="let myself of myselfs; index as i">{{ myself.name }}</li>
</ul> 

https://ultimatecourses.com/blog/angular-ngfor-async-pipe