*ngIf在我的Html中不起作用，但ngIf显示第一个内容
ngIf是Angular框架中的一个指令，用于根据条件动态显示或隐藏HTML元素。如果在你的HTML中使用了ngIf，但它似乎不起作用，可能有以下几个原因：
- 错误的语法或使用方式：确保你正确地使用了ngIf指令，并将条件表达式放在引号中。例如，ngIf="condition"。
- 条件表达式的值不正确：检查你的条件表达式是否返回了正确的值。如果条件表达式返回true，元素将被显示；如果返回false，元素将被隐藏。
- 没有正确引入Angular的核心模块：在使用Angular的指令之前，确保你已经正确地引入了Angular的核心模块。在你的组件文件中，使用import语句引入Angular的核心模块，例如：import { NgModule } from '@angular/core';
- 组件的变量没有正确初始化：如果你在组件中使用了一个变量作为条件表达式，确保该变量在使用之前已经正确初始化。如果变量没有被初始化，条件表达式可能会返回undefined或null，导致*ngIf不起作用。
- 组件的变量没有正确绑定到HTML中：确保你在HTML中正确地绑定了组件的变量。使用插值表达式或属性绑定将组件的变量与HTML元素关联起来。例如，使用{{ variable }}或[property]="variable"。
如果你仍然无法解决*ngIf不起作用的问题，可以提供更多的代码和上下文信息，以便更好地帮助你解决问题。
关于*ngIf的更多信息和使用示例，你可以参考腾讯云的Angular开发文档：Angular开发文档
相关·内容
2回答
Angular ngIf渲染
angular、angular-ng-if
只是一个简单的问题。
让我们将这段代码作为IE：
<div *ngIf="1===2">
...some content
</div>
NgIf内部的内容会被呈现，然后对页面隐藏吗?或者angular“知道”这个div不会被显示，所以甚至不会呈现它内部的内容？
浏览 1提问于2018-04-10得票数 1
1回答
在角2中使用HostListener/与NgFor元素绑定
angular、angular-ng-if、ngfor、angular2-hostbinding
我有用户名单。我希望当光标在按钮上悬停时，它将*ngIf设置为true，然后显示有关用户的信息(当光标离开按钮时显示为false )。
user-list.html**:**
<div *ngFor="let user of users">
<h1>{{user.name}}</h1>
<div onUserHover *ngIf="ngIf">
<p>{{user.description}}</p>
</div>
</div>
user-list
浏览 4提问于2017-03-31得票数 1
3回答
查找类名为angularjs的元素并将类添加到元素
javascript、jquery、angularjs、angularjs-directive
所以我的代码中有这个HTML
<button ng-click="goBackDashboard()" class="button back-button buttons button-clear header-item"><i class="icon ion-ios-arrow-back"></i>
<span class="back-text" style="transform: translate3d(0px, 0px, 0px);">
<
浏览 0提问于2015-09-05得票数 0
8回答
无法读取未定义的属性“本机-元素”
angular、typescript、ionic2
我用的是离子2。
我需要得到HTML元素的值。
实际上，我用了viewchild。
这是我的html模板代码
<div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'; let last = last">
{{last ? callFunction() : ''}}
<div *ngIf="chat.sender == currentuser || chat.receiver == curr
浏览 14提问于2017-04-13得票数 38
回答已采纳
3回答
离子/角:不能绑定到'ngForOf'，尽管语法正确
angular、ionic-framework、ngfor
我正在开发一个带有角的Ionic应用程序，并遇到以下错误：
my.page.ts (片段)
export class MyPage implements OnInit {
public myArray: Array<string> = [];
constructor(){}
ngOnInit(){
this.updateArray();
}
updateArray() {
// Performs API Call and puts the results into 'myArray'
}
}
my.page.html (
浏览 8提问于2022-05-19得票数 0
2回答
为什么我得到*如果不是一个属性的div错误？
angular
我正在使用Cory Rylan技术的一个版本在我的表单上显示验证错误消息。这在RC4中运行得很好，但是，我不知道如何使用RC5来完成这个任务。
这是我缩小的SharedModule：
import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { CommonModule } from
浏览 3提问于2016-09-06得票数 5
回答已采纳
1回答
如何在AngularJS代码中隐藏角分量
javascript、angularjs、angular
我有从MyTableComponent代码呈现的AngularJS角分量：
// AngularJS code
// src/template/expanded-table.html
...
<div class="table-view-port">
<my-table ng-show="false" [model]="tableModel"
[dataSource]="data">
</my-tabl
浏览 4提问于2021-01-05得票数 0
回答已采纳
2回答
当标签<form>中存在*ngIf时，离子-无法获得离子输入值
angular、ionic-framework、ionic3
我正在构建一个混合应用程序，使用Ionic 3和角，我被困在这个：
我有一个表单，我只希望它出现取决于控制器中的条件。
控制器：
export class ClassName implements OnInit{
private show: boolean = false;
ngOnInit(){
if(someCondition){
this.show = true;
}
}
}
视图：
<ion-content>
<button ion-button small block full color="danger"
浏览 0提问于2018-05-15得票数 0
回答已采纳
4回答
假设我有两个组件，一个在显示另一个组件时被隐藏，如下所示：
<div>
<componentOne *ngIf="showComponentOne"></componentOne>
<componentTwo *ngIf="!showComponentOne"></componentTwo>
</div>
现在，componentOne包含了一个非常大的<img>图片，每次初始化时都会加载它。当组件被激活时，在短时间内会显示图像alt-属性，直到加载图像为止。因为这是相当
浏览 1提问于2019-04-12得票数 3
回答已采纳
3回答
我什么时候应该对隐藏的财产使用*ngIf，反之亦然？
angular
我知道*ngIf和hidden属性在角上的区别：
*ngIf：向DOM添加/移除元素。
hidden：只是在DOM中显示/隐藏元素。
我不确定的是合适的条件(？)选择一个而不是另一个。在一个条件下删除一个元素并再次添加它听起来有点费钱，但同时，让它留在带有hidden属性的DOM中是不合适的。
我已经尽可能多地粘贴到*ngIf上，但是当我尝试访问*ngIf模板中的元素时，它有时会发出错误，即使我将*ngIf的条件更改为true (可能是因为我不习惯DOM更新的周期)。在这种情况下，我使用hidden属性，而不是因为它看起来是正确的。
所以重点是，我想知道选择一个而不是另一个的明确的标准
浏览 0提问于2018-07-13得票数 4
回答已采纳
2回答
使用ng-show两次调用控制器函数
javascript、angularjs、angularjs-scope
我有一个非常简单的角度应用程序设置，代码如下：
index.html
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
<script src='app.js'></script>
</head>
<body ng-app="app&
浏览 3提问于2013-09-02得票数 6
1回答
为什么异步函数导致ViewChild在ngOnInit()中未定义
angular、settimeout、viewchild
下面是by组件，它的ViewChild引用了html中的#h1：
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1 #h1 *ngIf="showh1">
Welcome to {{title}}!
</h1>
`,
styleUrls: ['./app.component.css']
})
e
浏览 2提问于2017-12-17得票数 3
1回答
Angular 4：<router-outlet>内的自定义属性指令未执行
angular、angular-routing、angular-directive、angular-components、angular-component-router
我目前正在尝试为我的Angular 4 (v 4.2.6)应用程序创建一个基于组件路由的自定义属性指令。关于如何创建这样的属性指令，我遵循了。
当myHighlight指令放在根组件上时，一切都很正常。不幸的是，当与插入到router-outlet中的组件中的@angular/router结合使用时，它不起作用( attribute指令没有执行)。
为了将问题从我的应用程序中隔离出来，我使用了。
在这个插件上，您可以看到一个名为myHighlight (highlight.directive.ts)的自定义属性指令。此指令在根组件(app.ts)中使用。
然后，我添加了两个组件，用于路由器的基
浏览 20提问于2017-07-11得票数 3
回答已采纳
2回答
在内部使用jQuery和Angular2 *ngif不起作用
javascript、jquery、angular、typescript
我有倒计时jQuery函数在我的Angular2 *ngIf，它是不工作的。我的console.log中没有任何错误，但是div是空的。它只是显示标题(h1)。这是我的代码: HTML
<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>
Angular2 TypeScript组件
ngOnInit() {
this.getDat
浏览 4提问于2017-02-04得票数 4
回答已采纳
3回答
如何在不使用NgIf的情况下计算类型记录表达式？
html、angular、frontend
我一直在寻找答案，我一直用的是NgIf，我不想用它
我正在尝试使用[hidden]。因此，请不要将此标记为重复或“不明确”，这是非常清楚的(我之所以提到这一点，是因为以前与一些“主持人”有过不愉快的经历)。
我一直在努力做到这一点：[hidden]="vehicle.body==='sedan' "
这有效吗？如果不是，有人能给我指点正确的方法让它工作吗？
我尝试在TS组件中制作aT/F varible，因为我确信像[hidden]="isHidden"这样的东西确实有效。但是我想评估HTML部分中的表达式。
谢谢
浏览 5提问于2020-03-03得票数 0
回答已采纳
1回答
将控件从Angular中的组件添加到html
angular
我有这种问题，想要添加一些额外的html内容的html内容，与条件逻辑。但问题是angular不能识别angular语法，而angular语法是从组件中手动添加的。 public isExist: boolean = false;
@ViewChild('appDropdown') appUnit: any;
ngOnInit(): void {
var el = this.appUnit._elementRef.nativeElement.querySelector('.list-area');;
el.insertAdjace
浏览 36提问于2020-12-31得票数 2
5回答
角质材料2 md.输入-容器不工作
angular、angular-material、angular-material2
我遇到了一个关于角度材料的问题，在这里我试图使用一个输入。然而，我所做的一切都没有效果。
我知道这个问题：
‘’md输入-容器‘不是已知的元素。
HTML：
<md-input-container>
<input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>
我在我的component.ts和app.ts中导入了这个
import { MdInputModule } from '@angular/mat
浏览 9提问于2017-08-21得票数 2
回答已采纳
2回答
如何在angular中动态更改组件名称？
angular
以下是一个自定义组件：
<app-variable-component-1></app-variable-component-1>
因此，我的想法是，当用户更改输入时，即单击或选择选项，则当前选择的值将存储在父组件内的属性中。
如下所示：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent-component',
templateUrl: './parent-component.component.ht
浏览 0提问于2020-09-26得票数 0
1回答
角4自定义指令混淆
angular、angular-directive
所以我最近开始学习角质。我已经到了想开始定制指令的地步了。经过一些研究，我得出这样做只需要几个步骤。
创建指令
将其导入应用程序模块
将其包含在app模块声明数组中。
在组件的模板中使用它
考虑到这一点，我开始创建一个定制指令，只需更改附加属性指令的元素的背景色即可。然而，我的指令似乎不起作用。然后我尝试把它包含在我的路由模块中，然后指令成功了.
为什么我必须将它包括在路由模块中？这感觉不那么全球化，我觉得我宁愿把它直接包含在根模块中，这样我就可以在整个应用程序中使用这个指令了。如果我只将它包含在应用程序根模块中，它不应该仍然工作吗？
是否最好为指令创建一个单独的模块，
浏览 3提问于2017-11-05得票数 1
1回答
访问*ngIf内部的url路径
angular、angular-router
我需要访问*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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
