angular 2通过函数的输出编写ngIf语句
Angular 2是一个流行的前端开发框架，它通过使用TypeScript编写代码来构建现代化的Web应用程序。在Angular 2中，ngIf是一个内置的指令，用于根据条件来显示或隐藏DOM元素。
ngIf指令通过函数的输出来确定是否显示或隐藏DOM元素。具体来说，ngIf指令接受一个布尔类型的表达式作为输入，如果该表达式的值为true，则显示DOM元素，否则隐藏DOM元素。
以下是使用ngIf指令的示例代码：
<div *ngIf="isUserLoggedIn">
<p>Welcome, User!</p>
</div>在上面的示例中，isUserLoggedIn是一个布尔类型的变量，它决定了是否显示包含欢迎消息的div元素。如果isUserLoggedIn的值为true，则显示div元素和欢迎消息，否则隐藏它们。
ngIf指令在以下场景中非常有用：
- 根据用户登录状态显示不同的内容。
- 根据条件显示或隐藏特定的功能或模块。
- 根据数据的可用性来动态显示或隐藏相关的元素。
对于ngIf指令，腾讯云并没有提供特定的产品或服务。然而，腾讯云提供了一系列与前端开发和云计算相关的产品和服务，例如云服务器、云存储、云函数等，可以帮助开发人员构建和部署现代化的Web应用程序。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品和服务的详细信息。
相关·内容
在双向数据绑定中，如果用户决定取消当前编辑怎么办？在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
我正在编写一个应用程序，在其中我需要从方法内部传递一个ngIf表达式。表达式以字符串形式来自后端服务。在角1中，我通常在传递到ng之前使用插值来计算字符串，如果它随后被计算为true或false，请看下面的柱塞。
更新
柱塞角1.5
但在角度2，我不能使用插值与*ngIf，抛出异常。请看下面的代码。我期望UI上没有任何一行(Howdy1、Howdy2、Howdy3)显示为传递相同的表达式。但是只有第一个是隐藏的，而不是剩下的两个表达式作为字符串变量传递。
我有两个角度2和1.5的柱塞代码。如果有人解决了类似的问题，请帮助我。
import {Component, NgModule} from
浏览 4提问于2016-12-13得票数 3
我有一个这样的组件
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent im
浏览 0提问于2020-01-13得票数 3
我正在试图找出Angular2的结构指令，目前，我找不到条件div和条件ng-template之间的区别。
从技术上讲，这个代码：
<div *ngIf="true">
<other-component></other-component>
</div>
将对此代码执行相同的任务：
<ng-template [ngIf]="true">
<other-component></other-component>
</ng-template>
浏览 1提问于2018-07-16得票数 2
回答已采纳
1回答
我试图使用来自角材料的指令显示一个自定义错误消息，因此我在下面编写了该方法：
类型记录文件
import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
@Component({
selector: 'input-errors-example',
templateUrl: 'input-errors-example.html',
styleUrls: ['input-errors
浏览 1提问于2017-09-26得票数 0
回答已采纳
我正在尝试在我的angular 2应用程序中导入图片，如下所示：
<img *ngIf="person.status" [src]="{{IMAGE_URL}}" width="20" height="20" />
但是当我使用src标签时，webpack不会在我捆绑的项目的输出文件中包含图片。如果我以下面的方式包含图片，一切都会按预期进行。
<img *ngIf="person.status" src=require('IMAGE_URL') width="20"
浏览 11提问于2016-07-29得票数 2
我正在寻找Angular 2内联编辑的例子或指针。我在Angular 1中找到了一些非常好的例子，比如。但我正在努力为Angular 2寻找相似的例子。我基本上需要实现与这个例子类似的结果。当涉及到Angular 2 (1或2)时，我是一个完全的新手，所以任何帮助都是非常感谢的。
我已经包含了我的Html，我的想法是，当单击按钮时，userEditing标志被设置为true，但我只希望选定的行更改为输入元素，而不是(目前正在发生的) ngfor中的所有行
<tr *ngFor='let user of userList'>
<td
浏览 6提问于2017-02-13得票数 2
回答已采纳
我已经编写了一个名为wordsAllDone的pip来检查是否所有的单词都被标记为done，并且它的输出是一个布尔值。但是，我想让这个按钮在words | wordsAllDone为true时隐藏，在它为false时显示。
<button *ngIf="words | wordsAllDone == false" (click)="startReview()">START</button>
但是angular2显示了一个解析错误：
<button [ERROR ->]*ngIf="words | wordsAllDon
浏览 1提问于2017-02-13得票数 2
回答已采纳
我正在使用Angular2，希望根据函数调用的结果有条件地显示一个元素。
当我这样做的时候，我注意到这个函数被多次调用。
@Component({
selector: 'my-app',
template: `
<h1>Hello</h1>
<div *ngIf="returnsTrue()">
<h1>World</h1>
</div>
`,
})
export class App {
name:string;
constructo
浏览 0提问于2016-10-04得票数 10
回答已采纳
如何在Angular 7中组合条件？
这段代码似乎不起作用：
<div *ngIf="isSituation1 || (isSituation3 && isSituation2)" [@slideInOut] role="alert">
<h1>
Show this if either condition is true
</h1>
</div>
如果: isSituation1 = true或isSituation3和isSituation2 = true，我想显示内容
浏览 0提问于2019-05-02得票数 2
我使用的是Angular 12，在我的component.html中，我需要有一个3级的条件。 例如： 我有一个列表，我需要检查它是否包含字符串。 true和false状态都有不同的输出，最后我需要在任何其他条件下使用ELSE。 So...First I有一个条件： <div *ngIf="list.includes('sometext') && listitem === null ">Condition 1</div> 现在来看一个与上面相反的情况： <div *ngIf="!list.includes(
浏览 39提问于2021-07-21得票数 3
回答已采纳
我刚开始使用Angular，而且是初学者。
当我在我的组件中使用*ngIf或*ngFor时，程序输出是一个空白页面，但没有*ngIf和*ngFor，以使页面正常工作。
Product.Component.html的代码
<p>Q: what is your Name?<input [disabled]="isButtonDisable" type="text" #txtAnswer>
<button [disabled]="product.price>1000" (click)="onclick
浏览 6提问于2019-07-12得票数 2
回答已采纳
Angular 2-我需要一个组件来输出一个函数，这样嵌套的组件就可以调用它。
我使用的是typescript和angular 2。
以下是输出代码：
@Component({
selector: 'jobs',
providers: [Job, JobService, Notification, NotificationService, Counties, Towns],
templateUrl: './app/components/job/jobs.html',
directives: [CORE_DIRECTIVES, FORM_DIR
浏览 1提问于2016-02-02得票数 0
1回答
我尝试使用通过JSON检索到的错误状态，并在表单中使用angular中的这些错误。 我尝试编辑formBuilder.group以处理接收到的内容，但它不起作用。 ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required, Validators.incorrect],
});
// get return url from route pa
浏览 17提问于2019-06-27得票数 0
回答已采纳
1回答
角型标的indexOf
、、、、
我正在尝试编写类似的true/false语句，类似于.selected()方法在Angular typescript中的工作方式。
如果计算或*ngIf语句的计算结果为True，则需要显示图像。代码是在app.html端编写的
代码：
<img src="/project/x.png" *ngIf="selectedimage.indexOf(v) !== -1"><a href="{{i['link']}}" target="blank" (click)="update_viewed(z
浏览 0提问于2018-07-12得票数 0
回答已采纳
1回答
我是一个角的初学者，我正在为我的Angular6 EmployeeComponent用茉莉花写一个测试。我有个错误
无法读取未定义的属性“控件”
我想我没有在employee.component.spec.ts文件中正确设置所有的依赖项。我研究了几天，但没有结果。任何帮助都将不胜感激。
这是我代码中的基本流程。employee组件包含一个登记表。当用户单击Submit时，员工服务将将数据插入/更新到防火墙。
下面是employee.component.html
<div class="row">
<div class="col-md-5&
浏览 0提问于2018-11-02得票数 9
回答已采纳
我有一个指令，它是不久前编写的，在我的整个应用程序中都使用过。我现在已经意识到它需要一个手表，这样它就可以在值变化时刷新和更新。
这是一个属性指令，根据用户的授权应用角的ngIf指令。在HTML中使用，它看起来类似于：
<div auth-if="id=12345;CREATE,READ,UPDATE"></div>
我遇到的问题是逗号？？当我试图查看authIf的属性值时，会得到一个错误。
错误：$parse:syntax语法错误:令牌'，‘是一个意外的令牌
现在，我不知道为什么我不只是使用字符CRUD，但我不想改变指令接受什么，有可能破坏东西
浏览 4提问于2015-11-25得票数 4
回答已采纳
1回答
我需要你的帮助！我是角度反应形式的新手，我试图用角的反应形式制作简单的表格。但是在代码的这一部分(ngIf指令，属性“无效”)中出现了一个错误：
<div class="container">
<form class="card" [formGroup]="form" (ngSubmit)="submit()">
<h1>Angular Forms</h1>
<div class="form-control">
<l
浏览 2提问于2021-08-12得票数 3
回答已采纳
1回答
我需要访问*ngIf中我的url的路径。我试过以下几种方法：
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'my-app',
providers: [],
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
constructor(public route: ActivatedRoute) {
浏览 0提问于2017-08-25得票数 0
回答已采纳
尝试更新fullcalendar angular2上的事件时出错
ERROR TypeError: Cannot read property 'clone' of undefined
已安装Angular2 fullcalendar并声明为CalendarComponent，
<div class="ibox-content" *ngIf="isLoaded">
<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcale
浏览 3提问于2017-10-14得票数 1
在angular 2中的ngFor中嵌套ngSwitch/ngIf指令时，有没有人看到过显示问题？
<ng-container *ngIf="allowedActions">
<button *ngFor="let action of displayActions(row)" mat-menu-item>
<ng-container *ngIf="action === 'publish'">
<i class="material-icons md-24
浏览 4提问于2017-12-06得票数 0
我想知道我是否可以在angular2中使用*ngIf中的函数返回值。
我在努力
<ion-fab right bottom *ngIf="shouldDisplayFlag()">
它正在给出错误。
浏览 4提问于2017-03-07得票数 1
当满足某些*ngIf条件时，如何从类装饰器调用某个方法。我有一个与问题完全类似的场景，其中使用ng-init()，但ng-init不是Angular2的一部分。
<div *ngIf="obj.someProperty" callSomeMethod() >
<!--render inner parts-->
</div>
浏览 8提问于2016-04-18得票数 6
回答已采纳
我正在使用两个ngif语句设置更新/编辑用户配置文件，但是，由于角不能读取这些属性，似乎出现了一个错误。
我尝试为*ngIf删除一个属性，但是它仍然不能工作。
user-dashboard.component.html
<mat-toolbar color="primary">
<button mat-icon-button>
<mat-icon>arrow_back</mat-icon>
</button>
<!-- Spread the toolbar item apart.-->
浏览 4提问于2019-10-06得票数 1
我正在做一个简单的平均身份验证应用程序，其中angular2-jwt是用来验证用户登录，现在，我希望在登录之前，我不希望仪表板，配置文件显示在导航栏上，而登录后，注册和登录应该是隐藏的，所以我angular2-jwt，但它不能正常工作，我分享下面的代码。
这是我使用的导航栏的代码
<ul class="nav navbar-nav navbar-right">
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']"
浏览 0提问于2018-01-28得票数 0
我的项目是使用AngularJS +Kendo。我正试图将Karma融入到现有的项目中。我可以测试指令，并在测试中呈现我构建的组件。但是，当我试图加载剑道网格时，它永远不会被渲染。
我的业力配置：
module.exports = function (config) {
config.set({
basePath: '../',
autoWatch: true,
singleRun: false,
frameworks: ['jasmine'],
browsers: [
浏览 4提问于2014-07-31得票数 1
回答已采纳
我正在使用AngularUI (这个角包，这个是：)来处理用户注册\登录在Firebase上的一个角度应用程序。
我的应用程序还使用AnularFire 2，我遇到了以下问题，试图处理用户状态(如果用户已登录或注销)。
这是我的主组件TypeScript代码：
import { Component, NgZone, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/rou
浏览 4提问于2020-11-16得票数 3
回答已采纳
1回答
我有一个组件方法，我正在为模板调用它。
例如：
export class Component {
isValid(id): Observable<boolean> {
return service.isValid(id)
}
}
<div *ngIf="isValid(1) | async"></div>
<div *ngIf="isValid(2) | async"></div>
<div *ngIf="isValid(3) | async"></d
浏览 7提问于2018-08-28得票数 0
我有两个输入字段:电子邮件和电话，如果用户输入电子邮件，那么电话输入是不需要的，反之亦然。一次至少需要一个字段。我有模型驱动的表单，我正试图为此编写一个自定义验证器函数。到目前为止，我得到了:在我的validator.ts
import { FormGroup, FormControl } from '@angular/forms';
export function requiredOptional(emailVal: string, phoneVal: string) {
return (group: FormGroup): {[key: string]: any} =
浏览 0提问于2016-12-11得票数 1
回答已采纳
有一种情况下，我想清除'viewContainer‘按钮单击，但它显示错误
错误TypeError:无法读取未定义的属性“viewContainer”
请检查附加代码，以更好地理解。
注意:在我的例子中，您将看到，我在document.body上添加了单击事件，并将指令名保留为。
此外，我试图在单击的侦听器中设置this.ngIf = false;，但这也会产生相同的错误。
错误TypeError:无法设置未定义的属性'ngIf‘
提前谢谢。
app.component.ts
import { Component, TemplateRef, Directive,
浏览 1提问于2018-12-28得票数 2
回答已采纳
我知道这是以前问过的。我几乎在每项建议中都试过了。我试图运行这个测试应用程序从wijmo与玩笑合并。该网站运行良好，除了css没有完全通过，但不担心这一点。我只是需要一个测试应用程序，它有wijmo工作和开玩笑作为一个单元测试框架。在我加入笑话之后..。当我使用npm测试时，我收到了错误。
package.json
{
"name": "test-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
浏览 2提问于2021-05-18得票数 1
我的应用程序有应用程序模块和仪表板模块，仪表板模块有很多组件。我必须从app组件触发仪表板组件函数(ChangedivStatus)。
我希望通过使用EventEmitter通过发送和订阅服务来实现这一点。
没有服务还有别的办法吗。
app.module.ts
import { NgModule } from '@angular/core';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { Brow
浏览 3提问于2017-11-03得票数 0
在Angular 8中这样做最好的方法是什么？ 我有两个日期为fromDateMin和fromDateMAx的输入，我需要将这两个日期与formControlName='fromctrlname‘和formControlName='toctrlname’进行比较，并显示错误 条件： 如果fromDateMin不为空，则用户不能选择早于此日期的日期。如果他们这样做，日期将更改为此日期。在error- message -span中显示消息。 如果fromDateMax不为空，则用户不能选择晚于此日期的日期。如果他们这样做，日期将更改为此日期。在error- message -sp
浏览 28提问于2020-07-18得票数 0
回答已采纳
当使用像*ngIf template这样的结构指令时，它看起来像angular在源代码中插入诊断注释。
1)为什么有用，以后如何使用？
2)这是angular 2在*ngIf中动态添加模板的方式吗？
在使用时
<ng-template [ngIf]="hero">
<div>{{hero.name}}</div>
</ng-template>
Angular在html中插入以下注释。
浏览 0提问于2017-11-23得票数 1
我是Angular 8的新手。我使用Angular 8。如有任何帮助或提示，将不胜感激！
我尝试实现以下伪代码：
if (condition1)
{
print1
}
else if (condition2)
{
print2
}
else
{
print3
}
下面是我只能实现if else的代码
<ng-container *ngIf="(5>1);then resultOutOfRange else resultNA;">
</ng-container>
<ng-template #resultOutOfRang
浏览 1提问于2020-03-05得票数 2
2回答
我从angular2开始。我有一个简单的模板驱动表单，我可以访问控制台中的数据。但我在传递数据时遇到了问题。这是我的密码。
import {Component} from "angular2/core";
@Component({
selector: 'my-template-driven',
template:`
<h2>Sign-up form</h2>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<div&
浏览 2提问于2016-10-19得票数 2
回答已采纳
1回答
在html模板中使用返回true或false的方法与在html模板angular 2+中直接编写这些条件有什么不同？ 特别有趣的是，第一个和第二个方法被调用的频率是多少？ 示例： <div *ngIf="array && array.length && (array.property === true)">test</div> 或 <div *ngIf="isArrayProperty()">test</div>
public isArrayProperty() {
retur
浏览 8提问于2019-02-05得票数 2
我在*ngFor循环中发出*ngIf来比较一些变量和属性(uid)，如下所示：
<ion-item-sliding *ngFor="let idea of ideas$|async;" >
<ion-item-options *ngIf="idea.creatorRef.id == uid">
{{...}}
</ion-item-options>
</ion-item-sliding>
*ngIf条件总是返回false。但是，如果我将变量或属性与字符串进行比较，它会按预期工
浏览 2提问于2020-08-12得票数 0
我使用angular5构建了一个项目，并且有大量重复的输入组件，例如：
<input id="name" name="name" class="form-control"
required minlength="4" appForbiddenName="bob"
[(ngModel)]="hero.name" #name="ngModel" >
<div *ngIf="name.invalid && (name.
浏览 0提问于2018-03-15得票数 1
回答已采纳
4回答
其他语句(角)
、、
angular2打算如何呈现
<div *ngFor="let todo of unfinishedTodos">
{{todo.title}}
</div>
万一unfinishedTodos.length >0
和文字“空”在另一种情况下。
P.S.
<div *ngIf="unfinishedTodos && unfinishedTodos.length > 0">
<div *ngFor="let todo of unfinishedTodos">
浏览 8提问于2016-12-21得票数 23
回答已采纳
演示
当我使用*ngIf隐藏嵌套组件的第一部分时，每个嵌套组件的ngOnDestroy都会被触发。
<div *ngIf="!ff2">
<my-component
></my-component>
<my-component
></my-component>
<my-component
></my-component>
<my-component
></my-component>
<my-co
浏览 0提问于2016-05-04得票数 10
我正在使用Angular 7，但在我的HTML中编写以下代码时没有得到响应。
<ng-template *ngIf="isStatus">
... line of code...
</ng-template>
请在这方面帮助我，我不明白我在这里做错了什么。
浏览 27提问于2019-11-20得票数 0
回答已采纳
1回答
我创建了一个名为书签的自定义组件，在这里我只是显示我的书签图标。
bookmark.html
<button ion-fab class="bookmark-button">
<ion-icon *ngIf="!flag; else elseBlocked" ios="ios-bookmark" md="md-bookmark" [ngStyle]="{'color': '#9F9F9F'}" class="bookmark-icon">&
浏览 1提问于2018-06-16得票数 0
我需要你的帮助与html编码在angular 4。我有一些产品记录在数据库中，与fullDescription字段在此格式：
<div align="justify"><span>
使用<div *ngIf="product" [innerHTML]="product.fullDescription"></div>，我得到了以下输出：
<div align="justify"><span>
作为文本。是否可以将其呈现为inner
浏览 0提问于2017-09-24得票数 7
回答已采纳
我正在尝试编写一个自定义密码匹配验证器，当我键入两个不同的密码时，我将在控制台中获得一个TypeError。我使用角材料控件和类进行验证。如果可能的话，我想避免ReactiveForms和FormGroup。我已经尝试了几种方法，但无法使确认密码方法工作。任何帮助都将不胜感激！谢谢!
TypeScript：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import {
浏览 1提问于2018-04-30得票数 0
回答已采纳
2回答
我正在尝试做CRUD应用程序。我的组件代码是
import {Component} from 'angular2/core';
import {FormBuilder, Validators, ControlGroup} from 'angular2/common';
function emailValidator(control) {
var EMAIL_REGEXP = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if
浏览 4提问于2016-02-23得票数 0
回答已采纳
4回答
我最近开始学习Angular2。
我想知道是否有可能使用ngSwitch或ngIf angular2
特定数值范围的指令？
假设我想根据一个范围更新某些文本的颜色。
<25 = Mark the text in red
>25 && <75 = Mark the text in orange
>75 = Mark the text in green
如何使用Angular2 ngIf/ngSwitch指令实现相同的功能。
有办法写这样的东西吗？
<div [ngIf]="item.status < 25">
<h2
浏览 5提问于2016-06-14得票数 5
回答已采纳
2回答
我创建了一个简单的应用程序，允许用户使用注册凭据登录。
我想让用户更直观一点，这样当他们点击" user“菜单时，他们会根据当前是否登录来导航到特定的组件。
允许注销的已登录用户->组件
允许登录的已注销user ->组件
到目前为止，我有以下几点：
import { Component, OnInit } from "@angular/core";
import { AuthService } from "./auth/auth.service";
@Component({
selector: 'app-header&#
浏览 3提问于2017-05-13得票数 0
我有一个边导航，它不是路由，而是填充内容区域。我在模板上使用了一大堆*ngIf，但我想知道是否有更好的方法？也许类似于<app-{display}></app-{display}>我将从模板中显示代码，您将能够更好地理解我所要求的内容。
模板是：
<div class="container-fluid">
<div class="row">
<div class="d-none d-md-block col-md-2 sidemenu">
<app-side
浏览 0提问于2018-03-28得票数 0
回答已采纳
我正在寻找一个能够基于输入标签指令自动验证的Angular4库。基本上，原因是我不想手动(在我的html模板代码中)用标准消息填充我的所有表单，如"Field1是必需的“，"Field2必须是有效的电子邮件”等，所有这些消息都用*ngIf标记，管理错误可见性。
我认为这个过程可以而且应该(在运行时)自动化。我发现了一个为AngularJs编写的有趣的库：
你知道任何类似的Angular4库吗？或者你能建议我一个好的方法来实现我的目标吗？
浏览 0提问于2017-10-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
