将元素绑定到 Angular mat-select答案

【问题标题】：Bind element to Angular mat-select将元素绑定到 Angular mat-select
【发布时间】：2021-03-21 06:16:59
【问题描述】：

所以，我有一个简单的角度材质 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>

这是我的 statusEnum：

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

现在，我有了这个元素：

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

我只想为特定的选定值显示。这是我尝试过的：

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

但它不起作用。知道为什么吗？

【问题讨论】：

请检查我的回答，让我知道它是否符合您的目的。最良好的祝愿。 :-)

标签： angular angular-material angular-ng-if

【解决方案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" }]

}

注意L请查看Stackbliz demo link的链接。

【讨论】：