Используйте выражение ngIf для условного отображения элемента на основе значения параметра выбора

Question

Я пытаюсь использовать выпадающий список для условного отображения различных элементов. Поэтому, когда опция выбрана, DOM получает другой экземпляр компонента на основе значения из раскрывающегося списка.

Я не уверен, правильно ли я связываю div с * ngIf.

<!--Component.html-->
<mat-form-field>
<mat-select [(ngModel)]="options">
<mat-option *ngFor="let opt of options" [value]="opt.value">
{{opt.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

<div [(ngModel)]="options" *ngIf="options.value === '2';">
<component-with-table></component-with-table>
</div>

// Component.ts

options = [
{value: '1', viewValue: 'example string'},
{value: '2', viewValue: 'another example string'}
]

Answer 1

Вы можете попробовать использовать следующее: In. html Файл

<mat-form-field>
<mat-select (selectionChange)="ChangeOption($event)">
<mat-option   *ngFor="let opt of options" [value]="opt.value">
{{opt.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

<div *ngIf="optionselected == '2'">
<component-with-table></component-with-table>
</div>
<div *ngIf="optionselected == '1'">
<component-with-table></component-with-table>
</div>

In .ts Файл

optionselected:string:"";
options = [
{value: '1', viewValue: 'example string'},
{value: '2', viewValue: 'another example string'}
]

// function

ChangeOption(event)
{
  this.optionselected = event.value;
}