DevExtreme中与Angular *ngIf等效的条件显示方法是什么？

DevExtreme Angular组件完全兼容原生Angular的*ngIf指令，不需要额外找DevExtreme专属的条件渲染方法——直接用*ngIf就能实现你要的简洁、可复用的条件显示效果。

实际用法示例 #

1. 控制整个DevExtreme组件的显示 #

把*ngIf直接加在DevExtreme组件标签上即可：

<!-- 当isSubmitEnabled为true时显示提交按钮 -->
<dx-button
  *ngIf="isSubmitEnabled"
  text="提交"
  (onClick)="onSubmit()">
</dx-button>

2. 控制组件内部元素的显示 #

在DevExtreme表单、弹窗这类组件内部，同样可以用*ngIf条件渲染子元素：

<dx-form [formData]="currentUser">
  <dxi-item dataField="username"></dxi-item>
  <!-- 仅当用户为管理员时显示权限设置项 -->
  <dxi-item *ngIf="currentUser.isAdmin" dataField="rolePermissions"></dxi-item>
</dx-form>

3. 在表格/列表中条件渲染列或行 #

以DataGrid为例，条件显示指定列：

<dx-data-grid [dataSource]="productList">
  <dxi-column dataField="productName"></dxi-column>
  <!-- 仅当用户有权限查看成本时显示成本列 -->
  <dxi-column *ngIf="hasCostPermission" dataField="productCost"></dxi-column>
</dx-data-grid>

常见问题排查 #

如果用*ngIf没生效，先检查这几点：

• 绑定的变量是否是布尔类型，且在组件类中正确声明、赋值；
• 不要把*ngIf写在DevExtreme组件的属性配置里（比如[visible]），它是结构型指令，必须直接作用于DOM元素或组件标签；
• 复杂条件可以封装成组件类的方法，再绑定到*ngIf：

// 组件类代码
shouldShowAdvancedOptions(): boolean {
  return this.user.level >= 3 && this.formStatus === 'edit';
}

<!-- HTML中调用方法 -->
<dx-select-box *ngIf="shouldShowAdvancedOptions()" [items]="advancedOptions"></dx-select-box>

内容的提问来源于stack exchange，提问作者S. L.