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

带滤波器的Angular 2- ngFor看不到变量

是一个关于Angular 2中ngFor指令使用滤波器时无法访问变量的问题。

在Angular中,ngFor指令用于循环遍历一个集合,并为每个元素生成相应的HTML代码。滤波器可以用于对集合进行筛选或转换,以便只显示满足特定条件的元素。

然而,有时候在ngFor指令中使用滤波器时,可能会遇到无法访问变量的问题。这通常是因为滤波器是在模板中的ngFor指令之外的上下文中执行的,导致无法访问ngFor指令中的变量。

为了解决这个问题,可以使用管道(pipe)来替代滤波器。管道是Angular中用于转换数据的一种机制,它可以在ngFor指令中使用,并且可以访问ngFor指令中的变量。

下面是一个示例代码,演示了如何在ngFor指令中使用管道来实现类似滤波器的功能:

代码语言:html
复制
<div *ngFor="let item of items | myFilterPipe">
  {{ item }}
</div>

在上面的代码中,myFilterPipe是一个自定义的管道,用于对items集合进行筛选或转换。通过将管道应用到ngFor指令中的items集合上,可以实现类似滤波器的效果。

关于Angular中管道的更多信息,可以参考腾讯云的Angular官方文档:Angular 管道

总结起来,带滤波器的Angular 2- ngFor看不到变量是一个关于在Angular 2中使用ngFor指令时,通过使用管道来实现类似滤波器功能的解决方案。

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

Angular不断检查可能会影响数据绑定更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,但组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大,响应性可能会降低,用户什么也看不到。...NgFor指令具有比本指南中显示NgIf更多功能,包括必需和可选。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...您可以在分配给ngFor字符串中启用这些功能,这是您在Angularmicrosyntax中编写。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板单个实例中引用。

16.1K20

Angular2 之 结构型指令几个概念

Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个模板指令。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...* 我们把它们都作为私有变量注入到构造函数中。 * viewContainer 往这里面去添加,指向是Template,这是边界,这样界定。...要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20
  • Angular快速学习笔记(3) -- 组件与模板

    *ngForAngular “迭代”指令。...如果你要引用变量名存在于一个以上命名空间中,那么,模板变量是最优先,其次是指令上下文变量,最后是组件成员。...'red' : 'green'"> 模板引用变量 ( #var ) 模板引用变量通常用来引用模板中某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component。...在这种模式下,有类型变量默认是不允许 null 或 undefined 值,如果有未赋值变量,或者试图把 null 或 undefined 赋值给不允许为空变量,类型检查器就会抛出一个错误 Angular...通过输入型绑定把数据从父组件传到子组件 HeroChildComponent 有两个输入型属性,它们通常@Input 装饰器。

    15.2K30

    angular知识点梳理第二篇-基本语法

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个需要绑定变量 public inputData...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型变量,用于验证NgFor.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个boolean类型变量,用于验证ngif

    2.5K30

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

    分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表中的当前项目。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代中项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。...在大多数情况下,Angular将引用变量值设置为声明元素。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同,如您在*ngFor中可能看到那样。 了解“结构指令”指南中差异。 引用变量范围是整个模板。

    29.9K20

    Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

    它可以向应用依赖注入器中添加服务提供商。 Angular 模块化 模块是组织应用程序和使用使用外部程序库最佳途径。 很多Angular库都是模块,e.g....Angular模块把组件、指令和管道打包成内聚功能块,每块聚焦于一个特性分区、业务领域、工作流或一组通用工具。... Angular模块是由一个@NgModule装饰器提供元数据类,元数据包括: 1-导入其他模块 2-声明哪些组件、指令、管道属于该模块 3-公开某些类,以便其他组件模块可以使用它们...@NgModule({ // 1-这里只导入了CommonModule和IonicModule // CommonModule中有 *ngIf和*ngFor // IonicModule 中有...ionic样式 imports: [ CommonModule, IonicModule, ], // 2- 这里声明了这3个组件属于该模块 declarations:

    2.2K30

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

    ngFor指令遍历组件英雄列表并为该列表中每个英雄呈现该模板一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代英雄详情。...你可以在模板中引用这个变量来访问当前英雄属性。...在显示数据Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...> {{hero.name}} 要在模板中使用Angular指令,需要在组件@Component注解指令参数中列出。...onSelect(hero)表达式调用AppComponent方法onSelect(),传递模板输入变量hero作为参数。 这是你在ngFor指令中定义同一个英雄变量

    3K30

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

    {{hero.name}} {{heroInput.value}} 表达式中术语上下文是模板变量和组件成员混合...如果引用这些名称空间名称,则模板变量名称优先,后面是指令上下文,最后是组件成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...{{hero.name}}中英雄是指变量输入变量,而不是组件属性。 模板表达式不能引用静态属性,也不能引用顶层变量或函数,如来自dart:htmlwindow 或document 。...([],())包围,或者前缀(bind-,on-,bindon-)都有一个目标名称。...它不允许脚本标记HTML泄露到浏览器中,既不能使用插值也不能使用属性绑定。 <!

    5.1K10

    AngularDart4.0 指南- 表单 顶

    你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent中)。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...正如前面所解释变量heroForm被绑定到整体管理表单NgForm指令。 NgForm指令 Angular自动创建并附加一个NgForm指令给标签。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: 在(增强)表单元素上定义一个模板引用变量。 在多处按钮中引用该变量

    17.5K30
    领券