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

如何使用ngif的ng-for访问ng-container中的变量?

在Angular框架中,ngIf和ngFor是常用的指令,用于控制模板的显示和循环渲染。当需要在ng-container中使用ngFor访问ng-container内部的变量时,可以通过以下步骤实现:

  1. 在ng-container外部声明一个变量,用于保存ngFor循环的数据源。例如,可以使用ngOnInit()方法在组件中初始化一个数组变量。
代码语言:txt
复制
public dataItems: any[] = []; // 假设是数据源
  1. 在ng-container中使用ngFor指令,将数据源绑定到一个局部变量上。这个局部变量可以在ng-container内部的ng-template中使用。
代码语言:txt
复制
<ng-container *ngFor="let item of dataItems">
  <ng-container *ngIf="item.flag">
    <ng-template #content>
      <!-- 在这里可以访问到item变量 -->
    </ng-template>
  </ng-container>
</ng-container>
  1. 在ng-container内部,使用ngTemplateOutlet指令和context对象来引用ng-template,并将item变量传递给它。
代码语言:txt
复制
<ng-container *ngFor="let item of dataItems">
  <ng-container *ngIf="item.flag">
    <ng-template [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
  </ng-container>
</ng-container>
  1. 在ng-template中,可以通过ng-template的上下文对象访问到item变量。
代码语言:txt
复制
<ng-template #content let-item>
  <!-- 在这里可以访问到item变量 -->
  <div>{{ item.property }}</div>
</ng-template>

通过以上步骤,就可以在ng-container中使用ngFor访问ng-container内部的变量。

在腾讯云的产品中,可以使用腾讯云云函数 SCF(Serverless Cloud Function)来部署和运行基于Node.js或Python的无服务器函数,实现云原生应用的快速开发和部署。具体介绍和使用方法可以参考腾讯云函数 SCF 的产品文档:腾讯云函数 SCF

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板单个实例引用。...变量作用域限于重复模板单个实例。 您可以在其他结构指令定义再次使用相同变量名称。 您通过在#(#var)前缀加上变量名称来声明一个模板引用变量。 引用变量是指其附加元素,组件或指令。...它可以在整个模板任何地方访问。 模板输入和引用变量名称都有其自己名称空间。 let herohero变量永远不会和#herohero一样。...您将通过TemplateRef获取内容并通过ViewContainerRef访问视图容器。 你在指令构造函数中注入这两个类作为类私有变量。...在没有合适宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16.1K20
  • Angular Material 设计之美

    正如官方所说其目的就是构建基于 Angular 和 TypeScript 高质量组件库。 官方列举了如下几点来解释“高质量”含义。 国际化和可访问性,以便所有用户都可以使用。...Angular Material 颜色定义严谨且优雅。以下是红色值变量。...ng-matero 在使用 ng add 初始化时候增加了预构建主题选项,生成主题只有一份,如果有特殊需求可以自行定制。实现方式就是不同主题传入不同变量,但是这种情况下多主题控制会有问题。...所以必须使用 mixin 编写某些样式,这样的话就可以有局部变量环境。...另外我们还可以使用 $swift-ease-out-timing-function、$mat-fast-out-slow-in-timing-function 这些动画变量实现和 MD 一样动画效果。

    5K30

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和cssdisplay:none效果是一致,和visibility.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个boolean类型变量,用于验证ngif...false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vuetemplate是基本一致,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断一些元素或者段落可以使用这个进行包裹

    2.5K30

    【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

    ---- 前言 这一篇我们带来是关于组件基础使用最后一块,内容投影和Vue插槽很类似,在组件封装时候非常有用,我们一起来体验一下。 正文 1....投影子元素 使用ng-container来包裹子元素,减少不必要dom层,类似vuetemplate 容器组件这样写 编号4 <ng-content select="question...在这种情况下,不建议<em>使用</em> ng-content 元素,因为只要组件<em>的</em><em>使用</em>者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 <em>ngIf</em> 语句<em>的</em>内部,该内容也总会被初始化...<em>使用</em><em>ng-container</em>定义我们<em>的</em>投影区块 <em>使用</em>ngTemplateOutlet指令来渲染ng-template元素。 通过内置<em>的</em>动态指令*<em>ngIf</em>来控制是否渲染投影。...]="content.templateRef"> 在业务组件我们使用ng-template来包裹我们实际元素。

    54830

    Kotlin如何安全访问lateinit变量实现

    Kotlin设计之初就是不允许非null变量在声明期间不进行初始化,为了解决这个问题,Kotlin lateinit 允许我们先声明一个变量,然后在程序执行周期将来某个时候将其初始化,让编译检查时不会...因为属性变量未被初始化而报错。...kotlin.UninitializedPropertyAccessException: lateinit property mList has not been initialized 所以我们在 Kotlin 1.2及更高版本上,经常使用基于反射...Array<String ) { if (::mList.isInitialized) { mList.add("") } } 但如果我们在一个类中有一个lateinit属性,然后尝试在另一类检查它是被初始化...,当然inner class 是被允许,具体设计细节参考官方 所以我们如有类似需求可以直接在目标类添加新方法来检查lateinit属性: class PreA{ lateinit var mList

    1.8K10

    C代码如何使用链接脚本定义变量

    在C代码为什么要使用取址符号 & ?...原因: 一,在C代码,这样语句: int foo = 1000; 会导致2件事情发生: 在代码,留出4字节空间,保存数值1000 在C语言symbole talbe,即符号表,有一个名为foo...二,在链接脚本,假设 __bss_start = 1000 __bss_start并不是一个变量,它只是一个值,并不需要在内存留出一段空间来保存它; 在C语言中,符号表中会有一个名为__bss_start...所以:在C语言中,要去使用链接脚本定义值时,应该这样做: extern int __bss_start; int val = &__bss_start; 使用取址符号&去得到它在符号表值。...注意,这个值只是链接脚本定义值,并不表示某个变量地址。

    4K20

    Sql 变量使用

    很简单,直接把上面代码日期改一下就可以了。...那我们先来看一下 Mysql 数据库怎么设置变量,以下是在 Mysql 设置变量day几种写法: set @day = "2019-08-01"; set @day := "2019-08-01"...; select @day := "2019-08-01"; 注意,如果使用 select 关键词进行变量赋值时,不可以使用 = 号,因为会默认把它当作比较运算符,而不是赋值,但是用关键词 set 进行变量赋值时是可以直接用...我们再来看看Hql(Hive-sql)变量赋值怎么设置,变量赋值时候也是用关键词 set,在变量引用那里和 Mysql 稍有不同,需要多加一个参数 hiveconf。...hiveconf:day} and time3 = ${hiveconf:day} and time4 = ${hiveconf:day} 以上就是关于 Mysql 和 Hql 这两种数据库变量使用方法

    11.5K50

    MySQL变量定义和变量赋值使用

    说明:现在市面上定义变量教程和书籍基本都放在存储过程上说明,但是存储过程上变量只能作用于begin…end块,而普通变量定义和使用都说比较少,针对此类问题只能在官方文档才能找到讲解。...前言 MySQL存储过程,定义变量有两种方式: 1、使用set或select直接赋值,变量名以@开头 例如: set @var=1; 可以在一个会话任何地方声明,作用域是整个会话,称为用户变量...2、以declare关键字声明变量,只能在存储过程中使用,称为存储过程变量,例如: declare var1 int default 0; 主要用在存储过程,或者是给存储传参数。...注意上面两种赋值符号,使用set时可以用“=”或“:=”,但是使用select时必须用“:=赋值” 用户变量与数据库连接有关,在连接声明变量,在存储过程创建了用户变量后一直到数据库实例接断开时候...在此连接声明变量无法在另一连接中使用。 用户变量变量形式为@varname形式。 名字必须以@开头。 声明变量时候需要使用set语句,比如下面的语句声明了一个名为@a变量

    8.9K41

    如何理解Python变量

    变量 在Python,存储一个数据,需要定义一个变量 number1 = 1 #numbe1就是一个变量,用来保存数据:1 number2 = 2 #number2也是一个变量,用来保存数据:2 sum...= number1+number2 #sum也是一个变量,用力保存1+2值 说明: 所谓变量:就是可以改变量。...程序就是用来处理数据,而变量就是用来存储数据 python变量不需要指明类型,系统会自动识别 内容扩展: 变量命名 1、下划线或大小写字母开头,后面可跟下划线、大小写字母和数字任意组合(但一般以下划线开头具有特殊含义...,不建议使用) 2、推荐使用具有固定含义英文单字或者缩写,比如srv = server, skt = socket,一般以posix命名规则为主 3、推荐驼峰写法:大驼峰用来写类,如MyFirstLove...,import keyword;//首先引起关键字模块 print(keyword.kwlist)//打印) 到此这篇关于如何理解Python变量文章就介绍到这了,更多相关Python变量是什么意思内容请搜索

    2K30

    Java 类和对象,如何定义Java类,如何使用Java对象,变量

    对象是一个你能够看得到,摸得着具体实体    如何定义Java类:  1.类重要性:所有Java程序都以类class为组织单元  2.什么是类:类是模子,确定对象将会拥有的特征(属性)和行为(方法...方法n;                                           }   Java对象  使用对象步骤:  1.创建对象:      类名 对象名 = new 类名(); ...5    引用对象方法:对象.方法       phone.sendMessage() ; //调用对象senMessage()方法  成员变量和局部变量  1.成员变量     在类定义,用来描述对象将要有什么...  2.局部变量      在类方法定义,在方法临时保存数据  成员变量和局部变量区别  1.作用域不同:        局部变量作用域仅限于定义他方法        成员变量作用域在整个类内部都是可见...  2.初始值不相同:          Java会给成员变量一个初始值          Java不会给局部变量赋予初始值,必要初始化  3.在同一个方法,不允许有同名局部变量;  在不同方法

    6.9K00

    在PHP如何使用全局变量方法详解

    所以如果你代码中有很多全局变量,那么你整个程序必然是难以维护。 本文将展示如何通过不同技术或者设计模式来防止这种全局变量问题。...当然,首先让我们看看如何使用“global”关键字来进行全局数据以及它是如何工作。...在开发过程,你可能会知道知道每一个全局变量,但大概一年之后,你可能会忘记其中至少一般全局变量,这个时候你会为自己使用那么多全局变量而懊悔不已。 那么如果我们不使用全局变量,我们该使用什么呢?...虽然这些变量都非常标准,而且在你使用也不会出什么问题,但是在某些情况下,你可能同样需要使用注册器来封装它们。 一个简单解决方法就是写一个类来提供获取这些变量接口。...> 正如你看到,现在我们不再依靠任何全局变量了,而且我们完全让这些函数远离了全局变量。 结论 在本文中,我们演示了如何从根本上移除代码全局变量,而相应用合适函数和变量来替代。

    7.3K100
    领券