基于条件的 Mat-option 值

Question

我只是想在 mat-select 中填充值。

 <mat-select id="selproj" class="proj-selector" >
      <mat-option *ngFor="let project of projects " [value]="project.projId">
        {{project.projName}}
      </mat-option>
 </mat-select>

项目数组是这样的

0: {projStatus: "Y", projName: "Test-1", projtId: 3}
1: {projStatus: "N", projName: "Test-2", projId: 9}

现在我要做的是，如果 projstatus 为否，我必须在 select 框中将 mat-option 值显示为 projname-notactive。 但是如果项目状态是 Y，我应该只显示项目名称。 我不能在 mat-option 中同时使用 ngif 和 ngfor。 我怎样才能做到这一点？

Answer 1

您可以将ng-container用于*ngFor并在mat-option上使用 *ngIf

 <mat-select id="selproj" class="proj-selector" >
    <ng-container *ngFor="let project of projects ">
      <mat-option *ngIf="condition" [value]="project.projId">
        {{project.projName}}
      </mat-option>
    </ng-container>
 </mat-select>

用您需要的任何条件替换condition 。

希望能帮助到你！

编辑：

根据评论中所述的条件，您无需使用ng-container 。 您可以在跨度中使用*ngIf

<mat-option [value]="project.projId">
  {{project.projName}} <span *ngIf="project.projStatus=='N'">Not-Active</span>
</mat-option>

如果您只需要mat-option中的文本...

<mat-option [value]="project.projId">
  {{project.projName + (project.projStatus=='N' ? 'Not-Active' : '')}}
</mat-option>