Angular 使用ngIf表达式根据选择选项值有条件地显示元素

我试图使用下拉选择来有条件地显示不同的元素。因此，当选择一个选项时，将根据下拉列表中的值为DOM提供一个不同的组件实例

我不确定我是否正确绑定了带有*ngIf的div

<!--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>

---

您可以尝试使用以下选项： 在.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>

//作用

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

---

查看有关如何使用的文档。

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

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