Angular 中的条件下拉功能组件渲染

Question

我正在尝试使用 angular 使用下拉列表作为它们的选择器来呈现一些功能组件。我在以下实现中遇到错误。任何见解将不胜感激，谢谢！

我的组件：

interface Sample {
  viewValue: string;
}

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})

export class SampleComponent implements OnInit {

  samples: Sample[] = [
    {viewValue: 'Sample1'},
    {viewValue: 'Sample2'},
  ];

  constructor() {
  }

  ngOnInit() {
    
  }

}

我的 HTML：

  <div>
    <h2>Sample:</h2>
    <form>
      <mat-form-field appearance="standard">
        <mat-label>Sample</mat-label>
        <mat-select>
          <mat-option *ngFor=" let sample of samples" [value]="sample.viewValue">
            {{sample.viewValue}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </form>
  </div>

  <div [ngSwitch]="sample.viewValue">
    <app-sample1 *ngSwitchCase="{viewValue: 'Sample1'}"></app-sample1>
    <app-sample2 *ngSwitchCase="{viewValue: 'Sample2'}"></app-sample2>
  </div>