将元素绑定到 Angular mat-select

Question

所以，我有一个简单的 angular material mat-select，看起来像这样：

  <mat-form-field appearance="outline" fxFlex="45%">
    <mat-label> select</mat-label>
    <mat-select formControlName="status"> 
      <mat-option *ngFor="let status of statusesEnum" [value]="status.value">
        {{status.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

这是我的状态枚举：

 statusesEnum = [{ name: "new", value: "1" }, { name: "passed", value: "2" }, { name: "done", value: "3" }]

现在，我有这个元素：

 <conditions [conditionForm]="reasonsForm" ></conditions>

我只想针对特定的 selected 值显示。这是我尝试过的：

 <mat-select #statusSelect formControlName="status">    
      <mat-option *ngFor="let status of statusesEnum" [value]="status.value">
        {{status.name}}
      </mat-option>
    </mat-select>
<conditions *ngif="statusSelect.selectedIndex==2" [conditionForm]="reasonsForm"> </conditions>

但这不是 working.any 为什么？

Answer 1

我想，我有一个适合您的解决方案，但是，您的 statusSelect 可能没有 selectedIndex，而且事情不会那样工作。所以，这是我下面给出的代码=>

HTML:

<mat-form-field appearance="outline" fxFlex="45%">
    <mat-label> select</mat-label>
    <mat-select formControlName="status" [(value)]="selectedStatus" > 
      <mat-option *ngFor="let status of statusesEnum" [value]="status">
        {{status.name}}
      </mat-option>
    </mat-select>
</mat-form-field>

 &nbsp;&nbsp;
    Selected = {{selectedStatus?.name}}
    <br>
<conditions *ngIf="selectedStatus?.value==2" [conditionForm]="reasonsForm" ></conditions>

TS:

export class AppComponent  {
  selectedStatus:any;
  constructor() {}
  reasonsForm:any;
  statusesEnum = [{ name: "new", value: "1" }, { name: "passed", value: "2" }, { name: "done", value: "3" }]

}

NoteL 请检查Stackbliz demo link的link。

将元素绑定到 Angular mat-select

Bind element to Angular mat-select

angular

angular-material

angular-ng-if