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