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

如何在ngFor外部为当前对象使用* ngFor?

在ngFor外部为当前对象使用* ngFor,可以通过使用ng-container元素和ngTemplateOutlet指令来实现。具体步骤如下:

  1. 在ngFor的外部,使用ng-container元素包裹需要循环的内容,并设置ngFor指令来循环遍历一个对象数组。
代码语言:txt
复制
<ng-container *ngFor="let item of items">
  <!-- 内部内容 -->
</ng-container>
  1. 在ng-container内部,使用ngTemplateOutlet指令来引用一个模板,并将当前对象作为模板的上下文。
代码语言:txt
复制
<ng-container *ngFor="let item of items">
  <ng-container *ngTemplateOutlet="template; context: { $implicit: item }"></ng-container>
</ng-container>
  1. 在模板中,使用let关键字来声明一个模板变量,以便在模板中引用当前对象。
代码语言:txt
复制
<ng-template #template let-item>
  <!-- 使用当前对象的属性 -->
  <p>{{ item.name }}</p>
</ng-template>

通过以上步骤,我们可以在ngFor外部为当前对象使用* ngFor,实现对当前对象的循环遍历,并在模板中使用当前对象的属性。

关于ngFor、ng-container、ngTemplateOutlet等概念的详细说明和使用方法,可以参考腾讯云的Angular开发文档:

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

相关·内容

AngularDart4.0 指南- 显示数据 顶

用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义列表中的第一个名字。...Angular列表中的每个项目复制,将hero变量设置当前迭代中的项目(英雄)。 Angular使用该变量作为双曲花括号内插的上下文。...在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。 @Component(directives:...)...要将此绑定转换为使用专用对象,请将英雄名称列表转换为Hero对象列表。 为此,你需要一个Hero类。...概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K10

Angular 6.x 基础教程

ngFor 指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...除了 index 外,我们还可以获取以下的值: first: boolean —— 若当前项是可迭代对象的第一项,则返回 true last: boolean —— 若当前项是可迭代对象的最后一项,则返回...true even: boolean —— 若当前项的索引值是偶数,则返回 true odd: boolean —— 若当前项的索引值是奇数,则返回 true 需要注意的是,*ngFor 中的 * 号是语法糖...第七节 - 使用 Input 装饰器 为了让我们能够开发更灵活的组件,Angular 我们提供了 Input 装饰器,用于定义组件的输入属性。...除了使用双向绑定,我们也可以通过 ngModel 指令,实现单向数据绑定, [ngModel]="message"。

15.6K20

AngularDart 4.0 高级-结构指令 顶

这些是两个NgFor输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己的上下文对象的属性。...let-i和let-odd变量被定义let i = index并let odd = odd。 Angular将它们设置上下文的index和odd 属性的当前值。...Angular设置let-hero上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...如果条件假并且视图尚未创建,请告诉视图容器从模板创建嵌入的视图。 如果条件真并且当前显示视图,则清除且销毁视图的容器。 没有人读取myUnless属性,因此它不需要getter。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

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

使用HTML表单元素(和)的双向绑定会很方便。 但是,没有原生HTML元素遵循x值和xChange事件模式。...对象的每个键都是一个CSS类的名字; 如果应该添加类,则其值true,如果应该删除则为false。...ngFor指令迭代由父组件的heroes属性返回的heroes,并在每次迭代期间将hero设置列表中的当前项目。 要访问hero的属性,请参考ngFor宿主元素(或其后代内)中的hero输入变量。...Output属性公开事件生成器,Stream对象。 术语input和Output反映了目标指令的视角。 ?...管道操作符(|) 在准备使用绑定之前,表达式的结果可能需要进行一些转换。 例如,您可以将数字显示货币,强制文本大写,或筛选列表并对其进行排序。

29.9K20

Angular 显示英雄列表

在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。 当依次遍历这个列表时,hero 会为每个迭代保存当前的英雄对象。...在教程的第一章,你曾在 styles.css 中整个应用设置了一些基础的样式。 但那个样式表并不包含英雄列表所需的样式。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...heroes.component.html (toggle the 'selected' CSS class) [class.selected]="hero === selectedHero" 如果当前行的英雄和...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

4.4K70

Angular 显示英雄列表

在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。 当依次遍历这个列表时,hero 会为每个迭代保存当前的英雄对象。...在教程的第一章,你曾在 styles.css 中整个应用设置了一些基础的样式。 但那个样式表并不包含英雄列表所需的样式。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...heroes.component.html (toggle the 'selected' CSS class) [class.selected]="hero === selectedHero" 如果当前行的英雄和...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

4K30

Angular 中结构指令模式 - 它们是什么且怎么使用

如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式的知识点。...*ngIf - 根据表达式返回的布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图 下面是一个结构化指令的例子。...当 true 时候,元素的副本会添加到 DOM 中。 完整的*ngIf 代码如下: <button (click)="toggleOn =!...*<em>ngFor</em> 指令 我们<em>使用</em> *<em>ngFor</em> 指令来遍历数组。...希望通过本文,读者能更好理解怎么去<em>使用</em>这些指令和什么时候去<em>使用</em>这些模式。 本文<em>为</em>译文,采用意译的形式。

3.8K20

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

-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility:hidden是要区别开的,当if判断false...this.isShow console.log("当前isShow:" + this.isShow) } } 数据视图层判断 改变NgIf状态 当前的isShow:{{isShow}} 我是一个div块 运行效果...官方的话:没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们也可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

2.5K30

最受欢迎的10大Angular技巧

让全局对象令牌化 最受欢迎的推文是关于全局对象的 DI 令牌。 在前端,我们习惯使用很多在任何作用域内都可用的全局对象。...我们使用诸如 window、document、fetch 方法和 location 等对象。我们希望能一直见到它们。...通过将全局对象作为令牌(token),你可以放心地使用、替换和测试代码。 ? https://twitter.com/marsibarsi/status/1274662852079517697?...s=20 控件值 ReplaySubject 在某些情况下,你需要订阅控件 valueChanges 并获取其当前值。不要重新发明轮子,只需这样做即可: ?...s=20 你甚至可以制作自己的 ngFor 替代品 最后一个:Angular 对于 for...of... 之类的指令有特殊的语法。这样,你可以创建自己的 ngFor

2.1K40
领券