即使带选项的数组已满，选择的选项也不会显示在页面中

Question

这是我的test.module.ts文件：

import { TestComponent } from './test.component';
import { Injector, DoBootstrap, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [TestComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  entryComponents: [TestComponent],
  providers: []
})
export class TestModule implements DoBootstrap {
  constructor(private injector: Injector) {

  }

  ngDoBootstrap() {
    const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
    customElements.get('my-test') || customElements.define('my-test', ngElement);
  }
}

这是test.component.ts文件：

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { forkJoin } from 'rxjs';
import { Base } from './models/base';

@Component({
  selector: 'my-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class TestComponent implements OnInit {

   selectedLocation: number;
   locations: Base[] = [{id: 1, name: 'a'}];

  constructor() {}

  ngOnInit() { }
}

还有我的test.component.html文件：

<div>
    <select>
      <option *ngFor="let location of locations">
        {{ location.name }}
      </option>
    </select>
</div>

当我在浏览器中运行该应用程序时，我看到了下拉菜单，但它为空，没有任何选项。我的错误在哪里？