如何使用下拉选择有条件地呈现 Angular 中的子组件？

Question

我有一组子组件，我试图根据下面的下拉选择有条件地呈现它们。 我只是想知道在这种特定情况下如何解决这个问题。 任何见解将不胜感激！

我有一个带有 HTML 的父组件，如下所示：

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


  <app-sample1></app-sample1>
  <app-sample2></app-sample2>
  <app-sample3></app-sample3>
  <app-sample4></app-sample4>
  <app-sample5></app-sample5>
  <app-sample6></app-sample6>
  <app-sample7></app-sample7>

组件 ts 文件如下所示：

import {Component, OnInit} from '@angular/core';

interface Sample {
  viewValue: string;
}

@Component({
  selector: 'app-sample-details',
  templateUrl: './sample-details.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleDetailsComponent implements OnInit {
  
  samples: Sample[] = [
    {viewValue: 'sample1'},
    {viewValue: 'sample2'},
    {viewValue: 'sample3'},
    {viewValue: 'sample4'},
    {viewValue: 'sample5'},
    {viewValue: 'sample6'},
    {viewValue: 'sample7'},
    {viewValue: 'sample8'},
    {viewValue: 'sample9'}
  ];
  

Answer 1

假设您已将mat-select的值正确绑定到一个字段，那么您可以像这样执行一个简单的 ngSwitch，

<div [ngSwitch]="yourSelectedValue">
  <app-sample1 *ngSwitchCase="'sample1'"></app-sample1>
  <app-sample2 *ngSwitchCase="'sample2'"></app-sample2>
  <app-sample3 *ngSwitchCase="'sample3'"></app-sample3>
  ...
  <app-sample7 *ngSwitchCase="'sample7'"></app-sample7>
</div>

但是根据您的代码示例，您似乎缺少表单。 这是从 Angular文档中进行设置的一种方法，

https://stackblitz.com/angular/jammvmggljvm?file=src%2Fapp%2Fselect-form-example.html