angular - 如何在插值中写入条件而不是 *ngIf

Question

我在我的应用程序中使用了 2 种语言，因为我用 2 个<option>标签编写了它。如何<option>使用插值将这两个条件写在一个标签中？

<option *ngIf="this.language=='en' || category.odiyaName==null" [value]="category.id">
  {{category.name}}
</option>
<option *ngIf="this.language=='or' && category.odiyaName" [value]="category.id">
  {{category.odiyaName}}
</option>

Answer 1

您也可以在插值中使用条件。请参阅包含条件的“括号”，以及如何在 this.language 中使用 this 是不必要的。我还使用了“安全”运算符来检查 odiyaName 是否为空，运算符“！” -else，如果 category.odyaName 为 "" 将通过您的条件

<option [value]="category.id">
    {{(language=='en' || !category?.odiyaName)
              ?category.name
              :category.odiyaName}}
</option>

Answer 2

您可以使用 if else 块来显示该选项。

<option [value]="category.id">
  <ng-container *ngIf="this.language=='en' || category.odiyaName==null; else elseBlock">
    {{category.name}}
  </ng-container>
  <ng-template #elseBlock>
    <ng-container *ngIf="this.language=='or' && category.odiyaName">
      {{category.odiyaName}}
    </ng-container>
  </ng-template>
</option>

Answer 3

基本上在组件上编写您的逻辑并将其传递给模板以简化 Html。

<option [value]="category.id"> {{checkLanguage(category)}} </option>

组件（.ts）文件：

 checkLanguage(category){ 
  if(this.language==='en' || !category.odiyaName){
    return category.name
  }else if(this.language=='or' && category.odiyaName){
    return category.odiyaName;
 }
}