基于条件的 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 是 no ，我必须在选择框中将 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。你可以在 span 中使用*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>