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

将ngIf - else转换为ngFor角度Firestore数组对象

ngIf-else是Angular框架中的一个指令,用于根据条件来显示或隐藏HTML元素。而ngFor是Angular框架中的另一个指令,用于循环遍历数组或对象并生成相应的HTML元素。

在Angular中,如果想要将ngIf-else转换为ngFor,可以通过使用Firestore数组对象来实现。Firestore是谷歌云平台提供的一种云数据库服务,用于存储和同步数据。

首先,需要在Angular项目中引入AngularFirestore模块,该模块提供了与Firestore数据库进行交互的功能。

接下来,可以通过使用AngularFirestoreCollection来获取Firestore中的数组对象。AngularFirestoreCollection是一个可观察对象,可以订阅其中的数据变化。

然后,可以使用ngFor指令来循环遍历Firestore数组对象,并根据条件来显示或隐藏相应的HTML元素。可以使用ng-container元素来包裹ngFor指令,并在其中使用ngIf指令来设置条件。

以下是一个示例代码:

代码语言:txt
复制
import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

interface Item {
  name: string;
  condition: boolean;
}

@Component({
  selector: 'app-items',
  template: `
    <div *ngFor="let item of itemsCollection | async">
      <ng-container *ngIf="item.condition; else elseBlock">
        <p>{{ item.name }}</p>
      </ng-container>
      <ng-template #elseBlock>
        <p>Condition is false</p>
      </ng-template>
    </div>
  `,
})
export class ItemsComponent {
  itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  }
}

在上述示例中,通过AngularFirestoreCollection获取了名为'items'的Firestore数组对象,并将其赋值给itemsCollection。然后,使用valueChanges()方法将itemsCollection转换为可观察对象,并将其赋值给items。

在模板中,使用ngFor指令循环遍历itemsCollection,并使用ngIf指令根据item.condition的值来显示或隐藏相应的HTML元素。如果item.condition为true,则显示item.name;否则,显示"Condition is false"。

需要注意的是,上述示例中使用了AngularFirestore模块和Firebase的Firestore服务。如果想要使用腾讯云相关产品来替代,可以参考腾讯云提供的文档和示例代码进行相应的替换和调整。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云数据库(TencentDB):https://cloud.tencent.com/product/cdb
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云函数(SCF):https://cloud.tencent.com/product/scf
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发(Mobile):https://cloud.tencent.com/product/mobile
  • 腾讯云区块链(Blockchain):https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙(Metaverse):https://cloud.tencent.com/product/metaverse

请注意,以上链接仅供参考,具体的产品选择和使用需根据实际需求进行评估和决策。

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

相关·内容

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

学到什么 在本文中,你学到关于 Angular 结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。 学完本文,你更好理解这些指令并在实际项目中使用它们。...*ngIf - 根据表达式返回的布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图 下面是一个结构化指令的例子。...这会将其转换为方括号 [] 中的属性绑定,比如 [ngIf]。 的其余部分,包含类名,插入到 里。...ngIf 跟 if-else 很类似。 当表达式是 false 的时候,*ngIf 指令移除 HTML 元素。当为 true 时候,元素的副本会添加到 DOM 中。...directive with the else clause 怎么使用 *ngFor 指令 我们使用 *ngFor 指令来遍历数组

3.8K20

AngularDart 4.0 高级-结构指令 顶

首先,它将*ngIf =“...”转换为模板属性template =“ngIf ...”,就像这样。 <div template="<em>ngIf</em> hero !...<em>NgFor</em>和NgSwitch ...指令遵循相同的模式。 *<em>ngFor</em>内部详解 Angular以类似的方式<em>将</em>*<em>ngFor</em>转<em>换为</em>从星号(*)语法通过模板属性到模板元素。...这些是两个<em>NgFor</em>输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当<em>NgFor</em>指令遍历列表时,它会设置并重置其自己的上下文<em>对象</em>的属性。...您将尝试<em>将</em>*<em>ngFor</em>和*<em>ngIf</em>放在同一宿主元素上。 Angular不会允许。 您仅可以<em>将</em>一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂的事情。...这个用例有一个简单的解决方案:<em>将</em>*<em>ngIf</em>放在包裹*<em>ngFor</em>元素的容器元素上。 一个或两个元素可以是一个temple,所以你不必引入额外的HTML级别。

16K20

AngularDart4.0 指南- 显示数据 顶

使用插值,可以属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data的新项目。...在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。 @Component(directives:...)...在实际应用中,大多数绑定是针对更专业化的对象。 要将此绑定转换为使用专用对象,请将英雄名称列表转换为Hero对象列表。 为此,你需要一个Hero类。... 不要忘记* ngIf中的星号(*)。 这是语法的重要组成部分。 在“模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。...ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K10

Angular 显示英雄列表

在本页面,你扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。 当依次遍历这个列表时,hero 会为每个迭代保存当前的英雄对象。...在本节,你监听英雄条目的点击事件,并更新英雄的详情。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

4.4K70

在前端中理解MVC服务之 Angular篇(完结)

角度允许我们忘记DOM,所以,让user.view.ts文件从我们的应用中消失。最后,在最后一篇文章中,我们转换代码以将其与 Angular 框架集成。 第 1 部分。...不管怎么样,该对象从Localstorage中构建一个接受一个普通对象,该对象将会提供数据。此纯对象必须符合接口,以便任何纯对象都不能实例化,而是满足定义的接口对象。...在此特定情况下,我们将使用数组来存储所有用户,并生成与读取、修改、创建和删除 (CRUD) 用户关联的四种方法。...('users')) || []; this.users = users.map(user => new User(user)); } 我们定义了一个名为"类变量"的类变量,该变量在所有用户从纯对象换为...但是,我们注意到,前几部分中的许多 DOM 操作代码已通过 Angular 得到解决,它们提供了两个结构指令,如 @ ngFor 和 _ ngIf,它们允许从模板本身轻松操作 DOM。

4.1K20

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

模板语句通常包含一个接收器,它响应事件执行一个动作,例如HTML控件的值存储到模型中。 绑定通过一个名为$event的事件对象来传递关于该事件的信息,包括数据值。 事件对象的形状由目标事件决定。...NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。 在此示例中,指令绑定到条件表达式,如isActive。...另一方面,TypeScript和JavaScript许多值(包括非空对象)视为true。...TypeScript代码转换为Dart代码时,请注意真/假问题。 例如,忘记!...下面是NgFor应用于的例子: {{hero.name}} 您也可以NgFor应用于组件元素,如下例所示: <hero-detail

29.9K20

Angular 显示英雄列表

在本页面,你扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。 当依次遍历这个列表时,hero 会为每个迭代保存当前的英雄对象。...在本节,你监听英雄条目的点击事件,并更新英雄的详情。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

4K30

【Angular教程】-组件初识|8月更文挑战

selector: 标注组件的名称,在使用组件的时候使用的就是它 templateUrl: 标注html模板的路径 styleUrls: 标注html模板使用的样式的路径,我们看到是用的数组格式,说明传递多个样式文件应该是没有问题的.../div> 通过演示可以看得出 app中的fontSizePx属性被传入到sizer组件中 在操作sizer组件后又将size更新到了app中的fontSizePx属性,页面随之更新 结构型指令 NgIf..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array... = ['小米', '华为', '苹果']; 给组件html模板添加演示代码: {{ i...{{ value | lowercase }} 字符串全部转为大写 UpperCasePipe: {{ value | uppercase }} 将对象转换成json

1.9K20

Angular 从入坑到挖坑 - 模块简介

模块所在文件 功能点 BrowserModule @angular/platform-browser 用于启动和运行浏览器应用的的基本服务 CommonModule @angular/common 使用 NgIf...、NgFor 之类的内置指令 FormsModule @angular/forms 使用 NgModel 构建模板驱动表单 ReactiveFormsModule @angular/forms 构建响应式表单...通过 export 关键字,模块可以把其中的某些对象声明为公共的,从而其它 JavaScript 模块可以使用 import 语句来访问这些公共对象 例如下面的示例代码中,别的 javascript...当创建新的组件时,需要将它们添加到 declarations 数组中。...数组中添加根组件用来作为组件树的根 3.3、特性模块 特性模块是用来特定的功能或具有相关特性的代码从其它代码中分离出来,聚焦于特定应用需求。

1.8K20

Angular与React相关

ngModel--实现数据双向绑定 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case来控制元素的显隐 *ngIf--控制元素的显隐性...分条说明 1.routes: 数组,所有的陆游信息都需要在该数据中进行配置 2.router-outlet: 插座标识,用来切换不同的组件 3.router: 路由对象,可以调用该对象的方法实现路由的切换...分条说明. 1.查询参数传值 利用queryParams属性传值 2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置 7....* 路由传值: * 1.params--直接想要传递的参数以 / 的形式连续拼接在路径的后面 特点: 1.需要对路由进行配置 2.刷新网页,值依然存在 3.如果传递的参数过多...2.刷新网页,值被销毁 3.可以传对象 * 3.state, 如果进入state方式传值,Link的to属性值就不是字符串,而是一个对象,通过该对象的state属性进行传值 特点

1.2K20
领券