使用*ngIf - Angular2获取数据
*ngIf是Angular框架中的一个指令，用于根据条件动态显示或隐藏HTML元素。它的作用是根据给定的条件来决定是否渲染某个元素。
在Angular中，*ngIf可以用于获取数据并根据数据的值来控制元素的显示与隐藏。具体使用方法如下：
- 在组件中定义一个变量来存储数据，例如：
data: any;- 在模板中使用*ngIf指令来判断是否显示某个元素，例如：
<div *ngIf="data">数据已获取：{{ data }}</div>上述代码中，如果data有值，则显示"数据已获取："和data的值；如果data为null、undefined或false，则该div元素将被隐藏。
*ngIf还支持使用else语句来定义当条件不满足时显示的内容。例如：
<div *ngIf="data; else noData">数据已获取：{{ data }}</div>
<ng-template #noData>暂无数据</ng-template>上述代码中，如果data有值，则显示"数据已获取："和data的值；如果data为null、undefined或false，则显示"暂无数据"。
*ngIf的应用场景包括但不限于：
- 根据用户登录状态显示不同的导航菜单
- 根据数据是否为空显示不同的提示信息
- 根据权限控制显示不同的操作按钮
对于腾讯云相关产品，可以使用腾讯云的云服务器（CVM）来部署和运行Angular应用。腾讯云云服务器是一种可弹性伸缩的云计算服务，提供高性能、可靠稳定的计算能力。您可以通过以下链接了解更多关于腾讯云云服务器的信息：
请注意，以上答案仅供参考，具体的技术选择和产品推荐应根据实际需求和情况进行评估和决策。
相关·内容
2回答
我想在循环中呈现一些数据：
<div *ngFor="let data of parameters.items.tableConfig.nodes">
<table-item [data]=data></table-item>
</div>
但数据
我有个错误：
异常：./TableWidgetComponent类TableWidgetComponent -内联模板中的错误:由:无法读取未定义的属性“节点”引起的7:17
怎样才能等待数据的到来，然后再呈现视图呢？
*ngIf="parameters
浏览 3提问于2017-03-06得票数 0
回答已采纳
我有一个表单，正在使用响应式表单进行验证。我可以让所有的验证工作，除非我有一些输入是有条件的，即使它们没有使用*ngIf提供给视图，也仍然无法验证表单。只有当一个条件为真时，我才能说"Validators.required“。请参考示例。
constructor(
private QRService:QRService,
fb: FormBuilder
){
this.title = 'My Form';
this.showDeliveryTypes = false;
this.complexForm = fb.group
浏览 1提问于2017-04-03得票数 2
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
0回答
我一直在试图弄清楚如何最好地使用angular2来更快地呈现数据，而使用边缘F12分析器看起来发生了太多事情，通常需要250-500ms (在核心i7u处理器上)来呈现20个项目的列表。
据说Angular2比原始的Angular版本要快得多，我看不出这一点，而且奇怪的是，查询数据的http请求比渲染数据的速度快得多。
我能做些什么来让它更快呢？我试着改变ChangeDetectionStrategy，但它并没有真正的帮助。我确实认为问题在于，Angular2似乎是一个接一个地添加元素，而不是逐行呈现，甚至在计算出完整结果之后也是如此。
下面是html：
<table class=
浏览 3提问于2016-12-19得票数 1
在这里，我使用Angular2实现了一些用于用户访问的html代码，但是为什么这些数据没有绑定到Angular2源代码端
Htmlcode
<form class="form-horizontal" novalidate [formGroup]="EmployeeForm">
<fieldset>
<div class="form-group" [ngClass]="{'has-error': (EmployeeForm.get('EmpName').tou
浏览 3提问于2017-07-15得票数 0
回答已采纳
1回答
我在一个项目中使用Angular2数据表来显示带有分页的表。
下面是指向库的链接。
有人能澄清一下我对#mf="mfDataTable"的一些疑虑吗？开发人员在他的演示中使用了，当我使用该mf时，使用mf.data来引用data.But。我的表不会被填充，但当我在没有该.mf的情况下使用它时，我的数据会加载到表中。
那么，我是否需要这个#mf="mfDataTable"，或者我错过了什么？
下面是我的代码。
干杯！！
<table class="table table-striped table-hover" [mfData]="
浏览 2提问于2017-05-29得票数 0
当用户点击促销页面时，我想在Angular2中隐藏页眉和页脚。
https://example.com/promo
我的app组件如下：
<login-bar></login-bar>
<banner *ngIf="showComponent()"></banner>
<navbar *ngIf="showComponent()"></navbar>
<router-outlet></router-outlet>
<footer *ngIf=
浏览 5提问于2017-07-21得票数 1
回答已采纳
我正在使用angular2，并且我从一个服务绑定数据，问题是当我加载数据时，我应该按id过滤它，这就是我应该做的：
<md-radio-button
*ngFor="#item of items_list"
*ngIf="item.id=1"
value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
</md-radio-butto
浏览 0提问于2016-03-24得票数 6
回答已采纳
有没有办法在服务初始化加载其他组件之前等待？在显示组件(需要数据)之前，我需要同步加载一些数据，并且我不想使用promises/observables (使用那些异步调用)
ngIf似乎不能削减它(组件加载，即使if不匹配)。
我没有使用路由器(应用程序不需要它)，所以我认为@CanActivate不适合这种情况。
有什么想法吗？
@Component({
selector: 'my-app',
directives: [MyDirective],
template: `
<div>
<div *ngIf=
浏览 0提问于2016-04-07得票数 4
我想知道ngFor上迭代器的数量，这样我就可以显示或隐藏元素，例如，我想这样做，如果迭代器的数量达到它，就应该停止迭代。到目前为止，整个模板是：
<p *ngIf = "heros2.length > 3">
there are two many users
</p>
<div *ngIf = "heros2.length == 3">
<ul>
<li *ngFor = 'let hero1 of heros2'>
there a
浏览 0提问于2016-06-24得票数 1
在Angular2中，我希望找到在运行时在模板中声明的子组件。我该怎么做呢？例如：
@Component({
template: `
<cmp1 *ngIf=expression></cmp1>
<cmp2 *ngIf=!expression></cmp2>
`
})
export class Component3{
findChild(){
// How to find cmp2
}
}
浏览 3提问于2016-07-28得票数 2
回答已采纳
如果我的angular2应用程序看起来像这样，顶部的金发女郎要和右边的生姜聊天，他们应该为它组织一个聚会吗？
发出事件，使用输入输出--这是angular2的方式吗？数据应该从子到父流到根，然后从父到子流到点？我是新来的，我经常希望有一些全局对象，在那里我可以保存一些所有组件都需要知道的信息。当该全局对象中的数据发生变化时，它应该神奇地改变它注入的所有其他服务和组件。例如，用户登录/退出，或者如果他单击按钮等等。
import {Injectable} from 'angular2/core';
@Injectable()
export object Globals {
浏览 3提问于2016-02-03得票数 22
我是Angular2和Rx的新手。
我的目的是从Git hub获取用户并显示登录名。(我在网上阅读RxJ时得到了这段代码)我想用Angular 2实现它。
export class AppComponent implements OnInit{
private listEmpty : boolean;
private userList : any;
constructor(){
}
ngOnInit(){
this.listEmpty = true;
this.userList = [];
var reqStream = Rx.O
浏览 0提问于2017-05-30得票数 0
我使用的是angular2，在我的表单中，我通常创建一个模型类并将我的对象绑定到表单中，然后通过this.myObject进行访问。
<div class="form-group ">
<label class="col-md-3 control-label">Label</label>
<div class="col-md-6">
<input type="text" class="form-control" [(ngModel)]="dipl
浏览 7提问于2016-08-09得票数 2
当找不到search时，我试图在angular2中捕获错误，并显示有关该错误的消息。我想我设法做到了，但是当找到搜索时，错误消息仍然显示。
我不确定这是否是在angular2中捕获错误的正确方法，但是当在搜索过程中没有找到项时，错误消息会显示出来。
this._searchService.getProduct(queryString1)
.subscribe(data => {
if (data) {
this.productObj = data;
setTimeout(() =>
浏览 0提问于2016-08-17得票数 0
回答已采纳
1回答
我正在用Angular2开发一个应用程序，因为我在代码中使用了指令或自定义标记，所以它不能通过W3C HTML验证来验证。
例如，如果我使用<my-component>元素或*ngIf指令或某些单向/双向绑定元素(如(click)或[(ngModel)] )，则它不能对任何W3C验证器有效。
我想我应该用可以生效的元素来代替它们。
因此，从开始，我创建了以下摘要以供替换：
(事件)->事件数据
属性->数据绑定-属性
(ngModel) ->数据-bindon-ngModel
*ngFor=“让我拥有项目”-->数据-模板=“ngFor让我拥
浏览 0提问于2016-11-29得票数 3
1回答
我似乎无法使我的指令工作，并怀疑它是否是由于使用*ngif。
组件
<div *ngIf="ticket" class="row">
<div class="col-xs-12">
<h4 appUsername>{{ticket.raisedBy.firstName}} {{ticket.raisedBy.surname}}</h4>
</div>
</div>
指令
import { Directive, ElementRef, Input }
浏览 3提问于2017-03-03得票数 0
回答已采纳
我有如下所示的代码，它从REST端点获取一些数据并将其显示在列表中。页面加载良好，当输入输入到文本框时，一切都按计划工作。问题是，如果用户从文本框中删除所有输入，则输出保持不变。不管怎么说，如果ngIf是空的，那么就不要显示任何东西吗？我试着使用*ngIf="searchRes.length > 0，但是没有改变，旧的输出仍然被播放.
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group">
浏览 4提问于2016-10-14得票数 3
回答已采纳
在前面的问题here中，我尝试仅当日期在两条消息之间更改时才显示该日期。 不同之处在于，我现在连接到了一个实时数据库(Firebase)，所以我订阅了数据源，并在通过index和*ngIf： <div *ngFor='let message of (chat | async) ; let i = index'>
<button *ngIf="i == 0 || (message.timestamp | date: 'ddMMMMyyyy') != ((chat | async)[i-1].timestamp | date: &
浏览 48提问于2016-06-23得票数 5
回答已采纳
我正在学习Angular2。我有一个组件，它有一个变量，它是一个对象。我正在迭代对象的字段，根据该位置的数据类型，我需要呈现一个不同的组件。在本例中，如果该位置typeof是一个number，则我希望呈现该label，但这是不起作用的 <div>
<div *ngIf='obj'>
<label *ngFor="let key of keys; let i = index">
<label class='key'>{{key}}:</label>
&
浏览 66提问于2016-05-29得票数 81
回答已采纳
我正在使用创建一个饼图，并使用输入将数据传递给该图表。但是组件构造函数上的输入是undefined，并且不显示图表。我已经在使用*ngIf了，实际上，如果我将输入设置为undefined，那么div就会隐藏，并在我传递一些数据时显示出来。然而，图表仍然没有显示出来。
@Component({
selector: 'pie-chart',
directives: [CHART_DIRECTIVES],
template: `
<chart [options]="options"></chart>
浏览 2提问于2016-09-01得票数 1
我试图根据aType.Name在ngFor循环中的值呈现6个自定义组件中的一个。以下是我的开关语法：
<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
<span [ngSwitch]="aType.Name&
浏览 1提问于2016-06-21得票数 2
回答已采纳
2回答
我在我的组件上有一个字符串数组const obs$: Observable<string[]>的观察值作为属性。虽然我可以在*ngIf语句上成功地使用async管道，但是当通过数组索引器(obs$ | async)[0]访问时，该管道会失败。
示例：
<!-- evaluates the array emmitted by obs$ for truthyness -->
<div *ngIf="obs$ | async">
<!-- only shown if obs$ emitted an array with length
浏览 12提问于2016-08-09得票数 5
3回答
我现在能够在视图中获得对象，但是我不能运行if语句。根据先前的回答，这就是我是如何引入对象的。
public getPosts$(category, limit) {
return this.cartService.getPosts(category, limit).map(response => {
return response && response.data && response.data.children;
};
}
ngOnInit() {
this.getPosts$(this.category, this.limit
浏览 2提问于2017-02-01得票数 11
回答已采纳
在我拥有的html文件中
<p *ngIf="!checklistsready">
not redy
</p>
<p *ngIf="checklistsready">
Ready
</p>
在我的typescript文件中
checklistsready: boolean = false;
constructor(){
this.fetchChecks();
}
fetchChecks(){
this._checklistService.getAllchecks() //
浏览 15提问于2017-08-12得票数 0
回答已采纳
我试图在组件中获得筛选过的数据列表。在我看来，我有这样的事情：
<ng-container *ngIf=”(items | filter:search.value) as result”>
<div *ngFor=”let item of result”>
{{item}}
</div>
</ng-container>
我需要从组件中获取result。是的，我可以将{{result_setter(result)}}添加到ng容器中，并在组件中使用变量创建方法：
filtered_data;
result_setter(data)
浏览 2提问于2018-07-04得票数 1
回答已采纳
如何从div "child_div“访问attr.open="false”。简而言之，我想模仿下面的代码示例，但是我不知道如何从子div访问父级attr。
<div class="parent_div" *ngFor="let level_1 of [1,2,3]" [attr.open]="false">
<div class="chlid_div" *ngIf="parent.attr.open">
<div class="parent
浏览 0提问于2017-11-16得票数 3
回答已采纳
3回答
在我的代码im中，使用*ngIf，它应该在任何时候只显示两者中的一个。但问题是，它只显示第二个，即使第二个不应该在某些时候显示。我使用for循环来显示所有元素，但正如您在图片中所看到的，即使第二个元素的值为-1，也只显示了第二个元素。谢谢你的帮助！
代码：
<ng-template let-internship="rowData" pTemplate="body" *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) === -1;"><!--TODO B
浏览 10提问于2017-05-08得票数 0
回答已采纳
如何显示跟随者的追随者数？
我现在要设置的是:输入字段(输入)，当点击按钮时，输入Github用户名，用户的所有追随者都会在下面列出。跟随者用户名和跟随者ID已经显示，但我也想显示追随者的数量。
更好地理解我正在寻找的东西的图片：
github-profile.component.ts
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
i
浏览 1提问于2016-08-25得票数 0
在加载数据时，我想阻止/禁用Kendo Angular2/4 Grid。
什么是最好的方法？
在我的组件中，我有一个isWorking变量，如果数据正在加载，这个变量是true/false (ajax调用)：
export class GridFilterComponent { public view: Observable<GridDataResult>; public state: State = { skip: 0, take: 10 }; public isWorking = true;
我找到的唯一选项是使用*ngIf="!isWorkin
浏览 2提问于2017-09-13得票数 0
回答已采纳
16回答
我得到的EXCEPTION: No provider for Http!在我的角度应用程序。我做错了什么？
import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'
@Component({
selector: 'greetings-ac-app2',
providers: [],
templateUrl: 'app/greetings-ac2.html',
directives:
浏览 7提问于2015-11-15得票数 348
回答已采纳
我们有一个带有服务器的孩子的html elelemt。我们有一些*ngIf条件的孩子，我们需要跟踪外部点击。问题是，当我们单击包含在ngIf中的子元素时，元素为null。元素可以在浏览器中看到，但不能在DOM中看到。
以下代码为Reuns-1：
this.element.nativeElement.contains(event.target)
nativeElement是我们的主要元素
event.target是我们的孩子，在*ngIf里
当元素在*ngIf中时，如何跟踪它们的单击事件
浏览 4提问于2016-10-28得票数 1
1回答
我正在尝试使用*ngIf来显示和隐藏基于其构建的类的成员的元素。但是，尽管我可以使用其他数据成员来显示标题等，但我仍然遇到以下错误。
TypeError: Cannot read property 'hidden' of undefined
我的html看起来像
...
<md-list-item *ngFor="let navigation of flatNavList"
(click)="onSelect(navigation)" *ngIf="navigation.hidden==false">
{{na
浏览 0提问于2016-07-09得票数 0
我试图找出实现ngModel自定义验证器逻辑的最简单方法。我有一个预定义的模型(接口)，它存储当前数据，所以我不想处理新的FormGroup/FormControl (模型驱动)方法。
如果我已经拥有我需要的所有数据，为什么我应该使用FormControls构建一个完全相同的模式呢？
下面是我的代码()：
import { Component, Input } from '@angular/core';
export interface MyWidgetModel {
title:string;
description:string;
}
@Component(
浏览 4提问于2016-08-06得票数 6
回答已采纳
1回答
Angular2拖放目标
、、、
我在我的angular2应用程序中实现了一个拖放功能，它的工作方式如下.用户会看到他们可以从中选择的选项列表，以及列表上方的一个拖放区域--当他们从其中一个选项拖动到drop区域时，事件就会被处理。
到目前为止，我有一个可拖放的指令，它处理拖动开始事件，并设置事件的dataTransfer属性上的一些数据。我尝试做的是做另一个指令，它是一个dropTarget指令，它简单地处理drop事件并获取数据。
这是可以做的吗？我最好只对可拖放的div和drop区域使用相同的指令，并插入一些逻辑，以便只允许在将div拖放到正确的目标上时发生drop事件。
谢谢
编辑:代码
下面是我的可拖放指令的代码：
浏览 2提问于2016-05-05得票数 5
回答已采纳
在双向数据绑定中，如果用户决定取消当前编辑怎么办？在angular 2中如何实现这一点？
考虑下面这段代码：
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `Name: {{ name }}<br>
<input *ngIf='editMode' type="text" [(ngModel)]='name' /><br>
&
浏览 1提问于2016-03-27得票数 12
背景
我正在创建一个信用卡表单组件。组件检查已输入的信用卡类型，并显示卡类型的符号/图标。该符号是一个外部SVG，一旦识别出信用卡类型，它就会加载。
问题
如下图所示，cc符号闪烁。通过查看Chrome检查器，可以看到元素正在发生变化，并且应用了*ngIf，元素正在以某种方式被更新(没有任何属性更改)，这似乎会导致闪烁。
码
下面是包含闪烁部分的模板部分的代码。我已经检查了组件，并且ngIf中使用的变量不会更新，除非应该更新(当信用卡号更改为不同类型时)。
<div class="credit-card-icon" *ngIf="creditCardTy
浏览 2提问于2016-10-15得票数 5
回答已采纳
我正在写一些Angular2模板，它们有不同容器的重复部分。在这种情况下，如果对对象进行了分组并启用了多截面模式，则视图可能会发生变化。请原谅这个冗长的示例，但类似于：
<template [ngIf]="isCategoryGrouped">
<div *ngFor="#categories of categories">
<div>{{ categories.category.name }}</div>
<div *ngFor="#thing of cate
浏览 3提问于2016-04-14得票数 7
2回答
我有以下HTML代码：
<pm-application [node]="node" *ngIf="node.type ==='application'"></pm-application>
<pm-proxy [node]="node" *ngIf="node.type ==='proxy'"></pm-proxy>
<pm-part [node]="node" *ngIf="node.type ==='part&
浏览 0提问于2016-04-29得票数 1
当我在角中使用enum时，如何将*ngIf传递给一个函数？
我有以下代码：
export enum RoleType {
User='User',
Admin='Admin'
}
组件函数
public hasAccess(role: RoleType) {
//check role type and return true or false
}
组件html
<div id="adminDiv" *ngIf="hasAccess('Admin')">
</div>
当
浏览 1提问于2019-01-28得票数 19
我想检查组件在Angular2中是否有一个属性。这是我的组成部分：
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'field-group, field-group[half]',
template: `
<div class="field-group">
<label *ngIf="label != ''">{{label}}</l
浏览 4提问于2017-01-22得票数 0
回答已采纳
我要validate form在angular2。我学到了一些文件，它的定义如下：
<form [ngFormModel]="form">
<input type="text" ngControl="username" />
<p *ngIf="username.pending">Fetching data from the server...</p>
<div *ngIf="username.dirty &&
浏览 5提问于2016-03-22得票数 7
我在Angular2中有一个模板：
<tr *ngFor="#user of users">
<td>
<label *ngIf="editing != user.id">{{ user.name }}</label>
<input #username *ngIf="editing == user.id" value="{{ user.name }}" />
</td>
<td>
浏览 0提问于2016-01-19得票数 1
回答已采纳
2回答
我已经通过一些引用在Angular2中创建了递归树，在模板中我获得了切换属性，在已使用的模型中没有声明任何切换属性或方法，但它仍然有效，有人可以解释它是如何工作的吗？
<li *ngFor="let childNode of taxonomyChildList"><input
*ngIf="childNode.hasMoreChildren"
type="checkbox" data-md-icheck
(click)="childNode.toggle=!childNode.toggl
浏览 0提问于2018-03-12得票数 1
回答已采纳
我已经为表创建了一个通用的搜索管道，我还将列值添加到了选择框中，现在我需要从选择框中获取所选的值并在管道中访问它。
以下是供您参考的代码
管
export class searchPipe implements PipeTransform {
transform(values: any[], filter: string, selectedvalue:any): any {
console.log(selectedvalue);
if (!values || !values.length) return [];
if (!filter) return values;
浏览 5提问于2017-02-17得票数 0
我试图将一个字段的更改强加给formGroup中的另一个字段，该字段位于这个组的多个实例的FormArray中。我在其中一个领域里使用了mydatepicker。例如，当日期被更改时，我希望对组中的更改字段的原因只进行验证，以确保没有选择第一个选项(值为0)。我对此有两个问题：
当我更改日期时，更改字段的原因不会立即被检查是否有效。只有在我将字段的值更改为1，然后更改为0之后，才会发生这种情况。它的默认值设置为0，当我更改日期时，它应该立即获得这个值。
当它最终意识到表单无效时，它会对所有更新按钮执行此操作，而不仅仅是在我更改了日期字段的FormGroup中。
ts文件代码：
浏览 1提问于2017-03-16得票数 1
1回答
我试图使用ngIf交换子组件，例如：
<div *ngIf="paymentListShow" payment-list></div>
<div *ngIf="paymentFormShow" payment-form></div>
因此，我的父组件用于处理以下值：
swapComponent(componentName: string): void {
let paymentState = {
'paymentList': (that): void => {
浏览 1提问于2017-03-17得票数 0
回答已采纳
我想要一种更好的方法来编写这些代码。
<li *ngIf="params.page > 1" class="page-item">
<a class="page-link" [routerLink]="[]" [queryParams]="changePage(params,1)">First</a>
</li>
<li *ngIf="!(params.page > 1)" class="page-item disa
浏览 2提问于2017-04-28得票数 5
回答已采纳
我正在尝试创建一个嵌套的treeview。
@Component({
selector: "myItem",
template: `
<li *ngIf="!Array.isArray(data)"> {{data.text}} </li>
<ul *ngIf="Array.isArray(data)">
<myItem *ngFor="let x of data" [(data)] = "x.data"
浏览 4提问于2016-05-15得票数 2
回答已采纳
请不要将其标记为副本--我已经尝试过以下链接: 1) 2) 3)
问题：
单击上一行中的链接时，我试图隐藏/显示表行，如下所示：component.html
<div class="table-responsive" *ngFor="let total of totals; let i=index">
<table class="table">
<ng-container *ngIf="total">
<h4 class="product
浏览 0提问于2018-01-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
