带Angular 6（角度材质）单选按钮和* ngIf的显示元素

Question

I am trying to implement that different views are shown on the screen depending on a radio button selected, all this with Angular material, NgModel , NgIf . But I can not do it. Please help.

HTML code:

<mat-radio-group [(ngModel)]="expressType">
  <mat-radio-button class="example-radio-button" *ngFor="let te of typeExpress" [value]="te">
    {{ te }}
  </mat-radio-button>
</mat-radio-group>

<ng-template *ngIf="te == 'Component 1'">
  <app-component1></app-component1>
</ng-template>
<ng-template *ngIf="te == 'Component 2'">
  <app-component2></app-component2>
</ng-template>
<ng-template *ngIf="te == 'Component 3'">
  <app-component3></app-component3>
</ng-template>

TypeScript code:

expressType: string;
typeExpress: string[] = ['Component 1', 'Component 2', 'Component 3'];

radioOptions: FormGroup; 

Answer 1

You should be using ng-container instead of ng-template and expressType instead of te to compare to the Component n value.

Try this:

<mat-radio-group [(ngModel)]="expressType">
  <mat-radio-button class="example-radio-button" *ngFor="let te of typeExpress" [value]="te">
    {{ te }}
  </mat-radio-button>
</mat-radio-group>

<ng-container *ngIf="expressType === 'Component 1'">
  <app-component1></app-component1>
</ng-container>
<ng-container *ngIf="expressType === 'Component 2'">
  <app-component2></app-component2>
</ng-container>
<ng-container *ngIf="expressType === 'Component 3'">
  <app-component3></app-component3>
</ng-container>

<h1>Or with ng-template</h1>

<ng-template [ngIf]="expressType === 'Component 1'">
  <app-component1></app-component1>
</ng-template>
<ng-template [ngIf]="expressType === 'Component 2'">
  <app-component2></app-component2>
</ng-template>
<ng-template [ngIf]="expressType === 'Component 3'">
  <app-component3></app-component3>
</ng-template>

<!-- Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->
    enter code here

---

Here's a Working Sample StackBlitz for your ref.

Answer 2

<mat-radio-group [(ngModel)]="expressType">
    <mat-radio-button class="example-radio-button" *ngFor="let te of typeExpress" [value]="te">
        {{ te }}
    </mat-radio-button>
</mat-radio-group>

OPTION 1

<ng-template [ngIf]="expressType == 'Component 1'">
    <app-component1></app-component1>
</ng-template>
<ng-template [ngIf]="expressType == 'Component 2'">
    <app-component2></app-component2>
</ng-template>
<ng-template [ngIf]="expressType == 'Component 3'">
    <app-component3></app-component3>
</ng-template>

OPTION 2

<ng-template [ngSwitch]="expressType'">
    <app-component1 *ngSwitchCase="'Component 1'"></app-component1>
    <app-component2 *ngSwitchCase="'Component 2'"></app-component2>
    <app-component3 *ngSwitchCase="'Component 3'"></app-component3>
</ng-template>

OPTION 3

<app-component1 *ngIf="expressType == 'Component 1'"></app-component1>
<app-component2 *ngIf="expressType == 'Component 2'"></app-component2>
<app-component3 *ngIf="expressType == 'Component 3'"></app-component3>

Note that you are comparing te instead of the model value expressType