首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用ngIf在ngx-datatable中补充布尔运算不起作用

ngIf是Angular框架中的一个指令,用于根据条件来显示或隐藏HTML元素。ngx-datatable是一个基于Angular的数据表格组件。

在ngx-datatable中使用ngIf指令时,可能会遇到布尔运算不起作用的问题。这通常是因为ngIf指令的条件表达式中包含了复杂的布尔运算,导致条件判断不准确。

解决这个问题的方法是使用一个中间变量来存储布尔运算的结果,然后在ngIf指令中使用这个中间变量作为条件。具体步骤如下:

  1. 在组件的类中定义一个布尔类型的中间变量,例如isConditionMet。
  2. 在组件的逻辑中进行布尔运算,并将结果赋值给中间变量isConditionMet。
  3. 在HTML模板中使用ngIf指令,并将中间变量isConditionMet作为条件表达式。

示例代码如下:

代码语言:txt
复制
// 组件类
export class MyComponent {
  isConditionMet: boolean;

  constructor() {
    // 进行布尔运算,并将结果赋值给中间变量
    this.isConditionMet = // 进行布尔运算的逻辑
  }
}

// HTML模板
<ngx-datatable>
  <ngx-datatable-column>
    <ng-template ngx-datatable-cell-template let-row="row">
      <div *ngIf="isConditionMet">
        <!-- 显示的内容 -->
      </div>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

在这个例子中,我们使用中间变量isConditionMet来存储布尔运算的结果,并在ngIf指令中使用这个中间变量作为条件。这样就可以解决ngIf在ngx-datatable中布尔运算不起作用的问题。

关于ngx-datatable的更多信息和使用方法,你可以参考腾讯云的产品介绍页面:ngx-datatable产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令 顶

在此示例,星号(*)指令属性名称前面。 {{hero.name}} 没有方括号。 没有圆括号。 只要*ngIf设置为一个字符串。...三种常见的内置结构指令 - NgIf,NgFor和NgSwitch ... - 模板语法指南中进行了描述,并在整个Angular文档的示例中进行了介绍。...事实上,呈现视图之前,Angular注释替换及其内容。 如果没有结构指令,而只是将一些元素包装在,那些元素就会消失。比如短语”Hip! Hip!...注意使用NgIf的脱糖形式。 ? 现在有条件地排除一个选项。...满足Angular模板的类似需求。 编写一个结构指令 本节,您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf条件为true时显示模板内容。

16.1K20

AngularDart4.0 指南- 显示数据 顶

现场示例(查看源代码)演示了此页面描述的所有语法和代码片段。 插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称。...在任一种样式,模板数据绑定都具有对组件属性的相同访问权限。 * ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表的第一个名字。...模板中使用任何Angular指令之前,您需要将它们列组件的@Component注解的指令参数。...NgIf进行条件显示 有时候,只有特定情况下,应用程序才需要显示视图或视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。... 不要忘记* ngIf的星号(*)。 这是语法的重要组成部分。 “模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。

5.3K10
  • AngularDart4.0 指南-体系结构概述 顶

    AngularDart(我们通常在这个文档简单地称为Angular)是一个框架,用于HTML和Dart构建客户端应用程序。...Dart,您可以使用注解附加元数据。...= null"> * ngFor告诉Angular英雄列表中标出每个英雄的一个。 * ngIf仅在选择的英雄存在时才包含HeroDetail组件。...出于这个原因,这个应用程序的JavaScript和TypeScript版本可以使用selectedHero作为* ngIf表达式的值。 Dart版本必须使用布尔运算符!=替换。...如果请求的服务实例不在容器,那么将服务返回给Angular之前,注入器将创建一个并将其添加到容器。 当所有请求的服务已经解析并返回时,Angular可以这些服务作为参数调用组件的构造函数。

    7.9K30

    前端面试前端性能优化篇

    相信如果这个问题没有答好,面试中会很被动。于是,趁着这个天天宅的时期,好好的整理了一番。...、CSS代码可以内嵌HTML,比如:rem动态等5、避免使用iFrame6、使用骨架屏二、CSS优化加载优化1、避免使用css的@import2、避免使用通配符3、避免使用!...当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快5、巧用||和&&布尔运算符,可以减少执行代码语句6、使用加号拼接是最快的,其次是String()、.toString()、new String...shuoldComponentUpdate生命周期定义基础组件BaseComponent取代React.Component4、使用纯组件PureComponent5、添加Key值注:以上总结的可能不完整,可以评论区补充...,我后续补充上,谢谢~

    50741

    前端性能优化篇

    相信如果这个问题没有答好,面试中会很被动。于是,趁着这个天天宅的时期,好好的整理了一番。...、CSS代码可以内嵌HTML,比如:rem动态等5、避免使用iFrame6、使用骨架屏二、CSS优化加载优化1、避免使用css的@import2、避免使用通配符3、避免使用!...当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快5、巧用||和&&布尔运算符,可以减少执行代码语句6、使用加号拼接是最快的,其次是String()、.toString()、new String...shuoldComponentUpdate生命周期定义基础组件BaseComponent取代React.Component4、使用纯组件PureComponent5、添加Key值注:以上总结的可能不完整,可以评论区补充...,我后续补充上,谢谢~

    48250

    前端面试前端性能优化篇2

    相信如果这个问题没有答好,面试中会很被动。于是,趁着这个天天宅的时期,好好的整理了一番。...、CSS代码可以内嵌HTML,比如:rem动态等5、避免使用iFrame6、使用骨架屏二、CSS优化加载优化1、避免使用css的@import2、避免使用通配符3、避免使用!...当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快5、巧用||和&&布尔运算符,可以减少执行代码语句6、使用加号拼接是最快的,其次是String()、.toString()、new String...shuoldComponentUpdate生命周期定义基础组件BaseComponent取代React.Component4、使用纯组件PureComponent5、添加Key值注:以上总结的可能不完整,可以评论区补充...,我后续补充上,谢谢~

    70530

    【技巧】ionic3独享滚动区域之滑动segment

    想象一下这样一个场景,通过segment切换页面,通过*ngIf等类似指令来模拟显示不同页面的内容,代码表示如下: <div *ngIf="vm.selectedSegment...ion-content的滚动条的,也就是说,当列表1滚动到一定距离,当切换到列表2显示时,列表2已滚动到列表1所的位置了(效果图我就不上了),鉴于此,我们可以每个div外面再包一层,此层的滚动区域代替...let index: number = this.slides.getActiveIndex(); if(index >= 0 && index <=2){ //由于索引直接数字的话...*注意:这里为了演示独享滚动条使用了ion-slides,实际应用上我更喜欢swiper.js,因为ion-slides总有些奇奇怪怪的情况出现,就像我【Appetite】ionic3实录(七)次页实现及分析解决问题...【上】说明过一样。

    1.7K20

    AngularDart4.0 英雄之旅-教程-04明细 顶

    你可以模板引用这个变量来访问当前英雄的属性。...包装模板的HTML英雄细节内容。 然后添加ngIf核心指令并将其设置为selectedHero!= null。...刷新浏览器,该应用程序不再失败,名称列表再次显示浏览器。 当没有选定的英雄时,ngIf指令从DOM移除英雄详情HTML。 没有英雄细节元素或绑定担心。...当用户选择一个英雄时,selectedHero变为非null,ngIf将英雄详细内容放入DOM,并评估嵌套的绑定。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示列表下方时,很难列表识别选定的英雄。

    3K30

    EasyFind 5.0.1

    特别是搜索文本文件时? 下载EasyFind,Spotlight的替代(或补充),并在任何文件查找文件,文件夹或内容,而无需编制索引。...EasyFind对于那些厌倦了缓慢或不可能的索引,过时或损坏的索引,或那些只是寻找Finder或Spotlight缺少的功能特别有用。...特点: – 布尔运算符,通配符,短语 – 扩展布尔运算符,类似于DEVONthink和DEVONagent – 即时搜索,不需要索引 – 文件包中找到不可见的文件和文件(Spotlight没有的功能...) – 单独的列表显示每个文件的位置 – 使用Quick Look预览文件(Mac OS X 10.5或更高版本) – 提供上下文菜单和服务 – 支持拖放 – 非常迅速,支持多线程 –

    1.2K30

    AngularDart4.0 指南- 模板语法二 顶

    以下示例,目标是按钮的单击事件。...NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM的元素。 在此示例,将指令绑定到条件表达式,如isActive。...当表达式为false时,NgIf从DOM删除HeroDetailComponent,销毁该组件及其所有子组件。 Dart模式下,Dart期望布尔值(类型为bool的)为true或false。...'none' : 'block'">Hide with style 隐藏一个元素与NgIf去除一个元素是完全不同的。 当你隐藏一个元素时,该元素及其所有的后代仍然保留在DOM。...等待数据的时候,视图应该没有怨言地呈现,而null属性路径应该像title属性一样显示为空白。 不幸的是,当currentHero为空时,应用程序崩溃。 你可以*ngIf来解决这个问题。 <!

    30K20

    angular4实战(4)ngrx

    github.com/ngrx ngrx主要有四个模块,分别是 ngrx/store, ngrx/effects, ngrx/router-store, ngrx/store-devtools 本次实例的是...但自己本地没有把这段代码跑成功,未报错,但不起作用,就用做简单的方法来实现reducer的汇总。...name:j_bleach}=>{name:bleach} 或者输入属性为一个数组的时候[1,2,3]=>[1,2,3].push(4) 以上这两种方式都不会引发angular的检查策略(前提是元数据设置了...而在本例,通过reducer返回的是一个新的值(一般是一个新的对象),新的值变化也会引起组件检查。...本例,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法监听到控制loading值的改变,也就无法更新视图了。

    1.1K30

    超全收录!这些小图标原来是这样做的

    很多设计师设计的时候,大多都是直接复制已有的图片设计,下面就利用一些动图,和大家简单分享一下这些小图标是如何做的。 图片较多,建议wifi观看! ?...Infinity图标,Illustrator中使用自定义画笔工具完成。 ? 火箭图标,通过锚点工具和布尔运算来完成。 ? iOS 11 App Store图标,布尔运算进行完成。 ?...盒子图标,路径选择工具和布尔运算进行完成。 ? 螺丝刀图标。手柄的缺口是多边形工具创建的 (4边的多边形是正方形!)。 ? 雨伞图标,布尔运算完成。 ? 风扇图标,路径选择工具和布尔运算完成。...风车图标,锚点工具和布尔运算完成。 ? 锚点工具和布尔运算完成。 ? 更新图标,路径选择工具、布尔运算和锚点工具完成。 ? 刷新图标,锚点工具和路径选择工具完成。 ? 路径选择工具完成。 ?...钢笔工具,布尔运算和路径选择工具完成。 ? 锚点工具和布尔运算进行完成。 ? 耳机图标,通过双击旋转工具并键入特定值(10º和-10º)完成耳罩旋转。 ? 游戏控制器,布尔运算和路径选择工具完成。

    73520

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    问题二:为什么[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者是会移除。...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...是的,大多场景可以直接ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...ts把initSwiper方法相关内容移除: import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular...是因为该组件异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,为ion-slides组件加上一段*ngIf=

    1.4K20

    【Appetite】ionic3实录(六)首页实现

    写这个组件前,我们按照页面的顺序先逐个实现。不知道一个小时能写完不,赶上班… 仍然是先上UI设计图: ?...image.png 观察之,发布者和内容的文本信息可以ionic现有的组件实现,而视频播放和图片画廊(如果是轮播图可以slides组件,它是阉割并封装过的swiper,好像现在这样的效果不能实现)需要使用第三方组件...-- 视频播放器 --> ...用了结构指令ngIf来选择显示视频还是画廊;按钮组可以换用grid布局;此外,为了性能考虑,应用virtualScroll,但我简单一用时布局有变形,赶时间没分析,换用现在方式。...实际效果图 因为赶着上班,写得有点急,微调没怎么调,特别是swiper的参数配置的宽高有点诡异,还没摸清,另外说明内容还要补充一下,晚些再完善。

    1.1K40
    领券