角度6：在同一页面上显示有关所选下拉项的信息

Question

我是Angular的新手，我正努力在同一页面上显示另一个组件。想法是从下拉菜单中选择smth，然后在同一页面上的下拉下方获取有关此信息的信息。 在菜单中没有选择任何选项时，什么也不会显示。

<div>
 <mat-form-field>
  <mat-select placeholder="Choose cat" [(value)]="selected">
    <mat-option *ngFor="let cat of cats" [value]="cat.name">
        {{cat.name}}
    </mat-option>
  </mat-select>
 </mat-form-field>
</div> 

<div *ngIf=[selected]>
 <app-animals-table [value]="cat"></app-animals-table>
</div>

此处，AnimalsTable组件应采用输入参数 value ，并从下拉菜单中显示有关猫的信息。一切似乎都正常，除了无法为if语句找到正确的语法，因此仅当从下拉列表中选择项时，才显示表。

Answer 1

正如我提到的，您必须从ngIf中删除[]。

<mat-form-field>
  <mat-select [(value)]="selected">
   <mat-option>None</mat-option>
   <mat-option value="option1">Option 1</mat-option>
   <mat-option value="option2">Option 2</mat-option>
   <mat-option value="option3">Option 3</mat-option>
 </mat-select>
</mat-form-field>

<div *ngIf="selected">You selected: {{selected}}</div>

可以在此stackblitz

中找到一个工作示例