*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开发文档
相关·内容
我正在尝试实现一个"editComponent“，它可以在pageComponent或dialogComponent中显示，但同一组件中被提升的ng-content标记不起作用(仅适用于las ng-content标记)：
<div *ngIf="dialog">
<ng-content></ng-content>
</div>
<!-- for pages not in dialog popups put all div structure -->
<div *ngIf="!dialog&
浏览 2提问于2016-08-04得票数 0
2回答
我正在尝试学习使用Angular 2，同时使用Jade创建模板并导入转换后的.html文件。
如何在Jade中包含*ngIf和*ngFor？
尝试在HTML中实现以下功能：
<div class="container" *ngIf="products && products.length">
我在Jade中尝试了以下内容：
div.container(*ngIf='products && products.length')
上面的代码不起作用！帮助?
浏览 2提问于2016-04-07得票数 1
1回答
如何将ts文件中的值转换为HTML文件中的ngIf条件？不管有没有花括号，我都试过了，但似乎不起作用。sender_id的类型为number。提前感谢！ .html文件 *ngIf="item.Sender_ID != {{sender_id}}" ts.file this.api.getStaffDetailsByUsername(this.username).subscribe(res=>{
console.log(res)
this.department = res[0].Departament;
this.sender_id
浏览 21提问于2021-03-21得票数 0
我想在Angular 4中显示或隐藏一个基于布尔值的模板。
-这是在Home.Component.HTML内部
<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView ></ng-template>
-这是在HomeComponent内部
isSummaryViewVisbile: boolean = true;
上面的代码不起作用，它总是隐藏模板，尽管我赋值为true。
提前谢谢。
浏览 1提问于2017-11-16得票数 2
ComboBoxComponent提供了切换comboBox弹出窗口可见性的方法。我想显示已经打开的comboBox。我有以下实施：
datalist.component.html
<kendo-combobox #attributecombobox></kendo-combobox>
datalist.component.cs
@Component({
templateUrl: './datalist.component.html'
})
export class DatalistComponent implements OnInit
浏览 2提问于2017-04-03得票数 2
回答已采纳
我试图只在应用程序的“内页”中显示导航栏，而不是在登录/注册页面上显示。
我已经在navigation上创建了一个单独的组件，并在app.component.html中展示了它
<app-navbar *ngIf="navVisible"></app-navbar>
<div class="container">
<router-outlet></router-outlet>
</div>
我原以为如果我要使用*ngIf=navVisible，它会起作用，但它不起作用。
app.comp
浏览 0提问于2018-11-18得票数 0
回答已采纳
在HTML中使用验证函数名时，角验证不起作用。
如果我把它拿掉，它就能用了。
export class RegisterComponent implements OnInit {
ngOnInit() {
}
constructor (private formBuilder: FormBuilder,
private titleService: Title,
private _router: Router) {
this.setTitle('BS - Register New');
}
浏览 1提问于2019-05-31得票数 0
回答已采纳
我正在试图找到一种方法，只显示一些iframe元素的一些超文本标记语言，是交付给我的角度应用程序。
在我的模板中，我可以使用*ngIf来查看是否存在标记，但我不知道如何只显示对象的iframe，而不显示HTML的其余部分。
<div *ngIf="item.content.indexOf('iframe') > 0" class="item">
<div (click)="this.navigateToPost(item.id)">
<h2 [innerHTML]="i
浏览 0提问于2020-08-29得票数 0
我有一个路由/main/item:id
它看起来像这样：
http://localhost:5000/main/item/-JJHkhfghsiu45ve
在我的html中，我希望能够使用*ngIf来显示这是不是路由。我不想为此使用路由器插座。
我遇到的问题可能是关于参数的。
我正在做一些类似的事情：
<div *ngIf="this.router.url !== '/main/item:id'">
但这对我不起作用，因为它认为这总是错误的。谢谢
浏览 1提问于2016-11-01得票数 2
回答已采纳
我想使用angular创建一个定制表。因为我将列作为数组传递。在表格中，列包含文本、图像、URL、图标。是否可以为每一列动态发送自定义html？我试着从列定义中发送html。但它不是解析html，而是显示为类似<p>sample text</p>的文本。如何将json数据解析为html中的DOM。 columns = [
{
name: 'column1',
sort: 'asc',
propertyName: 'name',
dragDisabled: fal
浏览 26提问于2021-03-17得票数 0
2回答
<div *ngIf="domain || library">
<!-- <h2>{{ domain.catergory | uppercase }} || {{ library.name | uppercase }}</h2> -->
<h2>{{ domain.catergory | uppercase }}</h2>
<h2>{{ library.name | uppercase }}</h2>
<div>
全新的角，javascript，h
浏览 1提问于2018-04-02得票数 0
回答已采纳
3回答
我正在尝试使用async管道来实现ngIf。但不起作用。有人在这里帮我吗？
下面是我的html：
<div class="response-container">
xx {{response | async | json }}
<div class="failed-error" *ngIf="(response.responseFail | async )">
{{response.message}}
</div>
<div class="succe
浏览 24提问于2019-07-16得票数 4
回答已采纳
3回答
我正在使用很多的基础部件，如模态，手风琴和更多。在我的html中，这些元素可以很好地工作，但是当我使用来自这样*ngIf或*ngFor的内置指令时，这些基础组件就完全停止工作了。下面的例子。
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
<h2 class="text-center">Lorem Ipsum</h2>
<div *ngi
浏览 0提问于2018-06-21得票数 0
回答已采纳
我有一个页面显示基于单选按钮选择的文本框控件。当我从一个单选按钮切换到另一个单选按钮时，我能够显示文本框。在我的代码，我有单选按钮“男性”在默认情况下，如何显示第一个输入控制，默认情况下，在页面的初始加载。
HTML页面
<div class="radio">
<label>
<input type="radio" name="gender" value="Male" [formControl]="complexForm.controls
浏览 0提问于2017-03-25得票数 1
回答已采纳
我有一个使用分页和排序的mat-table，它可以正常工作，直到我放置我的构造函数："constructor(private _router: Router){}"。表仍然显示，但分页和排序不显示。它一次显示所有内容。我是angular的新手，在识别问题上遇到了困难。 我试着把内容放在构造器的'ngOnInit‘上，但仍然不起作用。 export class LogsComponent implements OnInit {
constructor(private _router: Router){} //If i place this, it works but
浏览 20提问于2019-05-29得票数 0
回答已采纳
我试图根据component中的布尔值显示和隐藏标题和行。我可以隐藏特定的td，但不能隐藏特定的列。在下面的例子中，我试图隐藏最后编辑的行，它包含th和td元素。如果我将boolean变量设置为false，则不会显示该列的td，但如何隐藏标题。如果我设置以下条件，它似乎不起作用
<th *ngIf="c == ColumnNames[1] && showCol""
Html
<div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetails
浏览 4提问于2019-05-28得票数 0
2回答
不取初值的角形
、、、
在我创建的表单中，输入将预设为来自{{userPrivate.email}}的值
它显示在表格上，但是当我试图提交而不修改的时候，它显示出它里面的值是空的，除非我试图改变它。
我希望这样做，即使字段不变，我仍然可以用userPrivate.email的值提交它。
这是html
<div class="card">
<div *ngIf="(user$ | async) as user" class="card-body">
<div class="row" *ngIf="(user
浏览 7提问于2019-10-24得票数 1
回答已采纳
1回答
我有一个简单的mat-card，我想根据值显示/隐藏它。然而，*ngIf指令似乎对它不起作用。
<mat-card *ngIf="displayNoSignUp">Simple card</mat-card>
有没有办法通过在材料组件上使用指令来做到这一点？或者应该将其包装在html div中
浏览 0提问于2018-02-09得票数 2
回答已采纳
在我的模板中：
{{(services | async)?.length}}
返回"3“-数组中的许多项。但当我使用*ngIf时：
<ion-text *ngIf="(services | async)?.length == 3">{{(services | async)?.length}}</ion-text>
什么都不显示。我不明白为什么*ngIf返回假？
浏览 1提问于2019-11-21得票数 0
回答已采纳
1回答
我尝试在父组件上添加动画，因此当子组件:enter或:leave时，将显示滑动效果。这是我的父@component：
@component({
selector: 'plan',
templateUrl: '../templates/plan.tpl.html',
styleUrls: ['../../../../assets/css/plan.scss'],
animations: [
trigger('stepAnimation', [
transition(':en
浏览 0提问于2017-02-16得票数 6
我正在从服务器获取json对象，它们是深度嵌套的。
无论如何，当json对象为空(或数组)时，我想显示“用户尚未填写”。
我几乎什么都试过了，但都不管用。我做错了什么？
<div class="common-container" *ngFor="let detail of deepTeaInfo | getValues">
<div id="exp-box" *ngFor="let grade of detail['introduceInfo']['grade'] | getValue
浏览 2提问于2017-05-10得票数 0
3回答
我有3节/分，我想一个接一个地展示。例如，一旦我单击“显示进度”按钮，首先“第一”div应该只显示，在几秒后“第二”div应该显示“第一”1，然后几秒后“第一”和“第二”div应该隐藏，第三应该显示。它第一次工作很好，但是当我再次点击它时，它不起作用了。有什么更好的方法吗。这是代码
app.component.html
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button (click)=&
浏览 1提问于2021-05-28得票数 0
回答已采纳
1回答
我正在尝试显示数据报警器，但它显示的月份是正确的，但似乎不起作用。
日期min和max是动态传递的。
HTML:
<ion-item *ngIf="showDatePicker">
<ion-label>From Date:</ion-label>
<ion-datetime displayFormat="MMMM YYYY" min={{setMinDate}} max={{setMaxData}} [(ngModel)]="minDateRange"></ion-dat
浏览 0提问于2016-11-23得票数 0
回答已采纳
我正在测试一种新的菜单结构，但由于某些原因，使用*ngif绑定它时出现了问题。
统计数据: Angular 7 Chrome浏览器
菜单本身有按钮，并且工作正常-它在HTML上是这样编码的：
<p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu>
再往下看，我开始构建if语句的数组选择(仅用于测试目的)，最终将绑定到对象，但用于测试：
<p *ngif="activeItem =='0'" ><app-das
浏览 0提问于2019-03-18得票数 0
我正在通过解析一个json文件来创建一个动态表单。所以我需要基于一个条件绑定隐藏的/ngIf。我从typescript文件中传递条件，并在html文件中使用相同的东西。下面是我的代码更改
product.component.ts
export class ProductComponent implements OnInit {
condition : any;
productForm : FormGroup;
constructor(productFormBuilder : FormBuilder) {
this.productForm = productFormBu
浏览 1提问于2018-05-23得票数 0
2回答
我有以下问题，我需要能够从一个文件中传递代码，在该文件中，组件被用于其子组件。我正在考虑对ng内容执行以下方法，但是这个解决方案对我不起作用。我不确定使用ng内容的方式是否正确，或者我有一个错误，将信息传递给selects。
我想说明我打算如何执行这一逻辑，并希望有人指出可能出错的地方或替代这一逻辑的办法。
file1.html：
<father-component>
<div content1>
<div contentChild1 *ngIf="condition"></div>
<div content
浏览 3提问于2022-07-05得票数 0
2回答
我正面临着一个问题，主要是我不能在输入中填充值，而是在HTML中。我找过了，但似乎什么也没找到。我尝试了value、(value)、[(value)]、"k.bag.ConstructionYear"、"{{k.bag.ConstructionYear}}"和其他组合，似乎什么都不起作用。 mycomponent.html <ng-container
*ngIf="{
// other stuff
firstStepState: firstStepState$ | async
} as o"
>
//..
浏览 21提问于2021-04-13得票数 0
回答已采纳
1回答
Aria-实时显示/隐藏表单
、、、、
我有一个角14应用程序，我在这里显示一些内容。有一个按钮可以将其放入“编辑模式”，其中我隐藏内容并显示表单。当用户编辑表单并单击“完成”时，表单将被隐藏，更新后的内容将显示出来。
这很好，但我想让它更容易理解。我在这个部分中添加了一个aria-live，当它显示出来时，整个表单就会在Mac上使用VoiceOver大声读出，但是你不知道它是一个表单。但是，您可以在字段中选择选项卡并编辑表单，然后单击“完成”，表单就会消失。
然而，如何让没有视力的用户知道：(1)表单已经出现，然后(2)表单消失了，常规内容又重新出现了？
我制作了一个精简的来举例说明。
它基本上就是这个HTML：
<div
浏览 2提问于2022-09-21得票数 0
回答已采纳
我有一个条件。我想要在其上显示该标签。在angular中，ngIf就在那里。但是，在纯HTML中有什么属性吗？ 我试过了 隐藏 hidden="false“ hidden="true“ 但是，什么都不起作用。
浏览 31提问于2019-10-09得票数 0
回答已采纳
我的app.component.html包含这些代码来显示滑块。
<div class="slider-pro" id="slider" *ngIf="router.url == '/home'">
<script type='text/javascript'>
initSlider();
</script>
...
</div>
但是angular2框架似乎跳过了我的javascript代码行。我的问题是如何在*ngIf呈现DO
浏览 0提问于2017-06-18得票数 0
在使用*ngIf时，您可以执行类似*ngIf = (value$ | async).property as prop的操作，然后在整个代码中使用prop，而不需要每次都重复冗长的(value$ | async).property。但是，只有当(value$ | async).property是真值时才有效-例如，如果它是零，则不起作用。
我的问题是-如果值是假的，我如何仍然获得as的好处，同时仍然有元素显示？或者更好的是，有没有一种在*ngIf之外使用as的方法呢？
浏览 0提问于2020-11-18得票数 4
经过多次实验，我发现，在.html模板中使用.includes()会使IE中的应用程序出错。
例如*ngIf="selectedItems.includes(item)
我已经在polyfills.ts中启用了所有功能，但IE仍然无法正确读取我的代码。
例如，当在.html模板中读取{{aVariable}}时，如果有includes()，它就不会在IE上显示，奇怪的是，如果我在它的html标签中放入一个*ngIf="true"，它就会起作用，比如：
<span *ngIf="true">{{aVariable}}</span>
浏览 3提问于2018-09-02得票数 2
我是角度测试方面的新手，我认为我有一个愚蠢的问题，但尽管有很多教程和指南，我还是找不到一个有效的解决方案。
我有一个复选框，当它被选中时，它应该显示一个div，我想用Jasmine来测试它。这是我的HTML：
<div>
Check this! <input #cb type="checkbox" (change)="1" id="checkboxToTest"/>
<div id="divRevealed" *ngIf="cb.checked">Hello!</
浏览 4提问于2021-04-20得票数 1
回答已采纳
3回答
以角5表示可观察
、、、
我试图用角度渲染一个可观察的。我请求一个API来获取一些数据，但是当我尝试渲染它时，浏览器上什么也没有出现。
这是我用来获取关于1名用户的数据的服务：
export class UserService {
public _url: string = "https://url/rest/user/";
constructor(private http: HttpClient) { }
getUser(id): Observable<IUser>{
return this.http.get<IUser>(this._url + id
浏览 0提问于2018-02-08得票数 0
回答已采纳
1回答
我正在致力于i18n的角度，我想提供一个形式错误的翻译。但我不知道怎么做。我跟随了的向导。我尝试使用select方法，但它不起作用。
最初，在尝试翻译之前，我的component.ts中有以下代码：
onValueChanged(data?: any) {
if (!this.userForm) { return; }
const form = this.userForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[
浏览 3提问于2017-08-21得票数 2
2回答
我想要创建3列响应画廊网格。我正在用下面的代码迭代图像数组：
<ion-grid>
<ion-row *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}">
<ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.length}}">
<img [src]="images[i].
浏览 5提问于2017-06-09得票数 1
回答已采纳
我使用ngIf在*.html中显示了如下消息：
<input name="name" id="name" formControlName="name" required>
<span *ngIf="name.invalid && (name.dirty || name.touched)" id="message">
Some messages
</span>
现在我要检查它是否生效。因此，在*spec.ts中，我将该ngIf的正确操作数设置为true(由“e
浏览 2提问于2017-10-28得票数 1
回答已采纳
我刚用的是角v6.0.3。我对AngularJS v1.6.9有一点经验
我正在设计一个基本的网页，登陆页面显示2个链接:第一个是登录，第二个是注册。在单击“登录”链接(我添加了一个(单击)事件)时，我给出了“/login”的路由(登录表单是一个组件)，并使用ngIf隐藏页面上的原始内容。移动到登录组件后，当我刷新页面"localhost:4200/ login“时，我使用ngIf隐藏的内容将再次显示，因为我在ngIf中使用的变量在刷新时被重新加载为'true‘值。
如何解决这个问题？(预先谢谢:)
app.component.ts
export class AppCompon
浏览 1提问于2018-06-01得票数 1
我在设置一个多条件的ngIf时遇到了麻烦。当嵌套<ng-container>时，每个条件都有一个条件，但当我只使用一个包含所有条件的容器时，它就不起作用了。
代码：
// This doesn't work
<ng-container *ngIf="
!(estadoReparacionValue === 'ANULADA') ||
!(estadoReparacionValue === 'ENTREGADO') ||
!(estadoReparacionValue === 'ENTR
浏览 3提问于2019-11-27得票数 1
回答已采纳
在我正在开发的角5应用程序中，我从dynamodDB中检索了一个类似于这样的json (它作为数组被检索并与*ngFor一起使用)，但对于这个问题的简单性，我可以说它存储在组件中如下“：
public person = {
"userID" : "abc123...",
...
"period1_status" : "applied",
"period2_status" : "placed",
"period3_status" : "applied"
浏览 0提问于2018-04-01得票数 3
回答已采纳
我使用*ngIf在我的HTML中显示一个组件。在typescript文件的.subscribe()中单击按钮后，触发*ngIf的变量会发生变化。虽然它最终会像它应该显示的那样显示，但用户需要在单击按钮后在页面上的任何位置单击额外的时间才能显示它。
我已经使用ChangeDetectorRef、get和set函数以及更改从.subscribe()中调用的变量的单独函数尝试了.detectChanges()。
HTML：
<mat-form-field>
<input matInput #filename placeholder="Enter filename&#
浏览 0提问于2019-05-23得票数 0
我是angular2的新手，我想使用*ngIf，但是方式有点不同，它不起作用。因此，我在对象type中有一个属性item，这种类型只能有三个字符串中的一个：
type_A
type_B
未指定
并根据item.type的值显示图像。我是这样使用的，但似乎不起作用(图像没有显示)：
<li *ngIf="item.type === type_A">
<img src="assets/images/typeA-icons.png"/>
</li>
<li *ngIf="item.type =
浏览 0提问于2017-02-01得票数 1
回答已采纳
在我的angular表单中，我有一个选择字段，它接受yes/no值，另一个字段只有在用户选择"yes“时才出现。Html代码如下所示：
<form [formGroup]="Form">
<mat-form-field>
<mat-label>Is Permitted</mat-label>
<mat-select [(value)]="perm" [formControl]="permission" required>
<mat-optio
浏览 0提问于2020-02-08得票数 1
1回答
让我的抓取器感觉我没有做错什么，但是当我运行它时，它既没有获取任何数据，也没有抛出任何错误。这三个领域(电话，网页和电子邮件)我正在寻找。似乎电子邮件和网页链接是隐藏的，所以这两个字段的xpath相当混乱。任何想法都将受到高度赞赏。到目前为止，我已经尝试过：
import requests
from lxml import html
def startpoint():
url="https://www.truelocal.com.au/business/strata-report-sydney/sydney"
page=requests.get(url, hea
浏览 2提问于2017-05-06得票数 0
1回答
我有大约2,000行HTML代码，可以从我的Java服务器中检索到。这个HTML代码中也有角指令，比如ngIf*、(click)和[ngClass]。当我尝试使用以下方法在客户端中显示该HTML时：
<div [innerHTML]="htmlData"></div>
<div innerHTML="{{ htmlData }}"></div>
我看到所有的HTML元素都显示正确，但是没有一个角指令工作(比如一些HTML应该与*ngIf一起隐藏，但是它们不是.所有的(click)事件都不起作用。我能做些什么来解决这
浏览 2提问于2019-01-21得票数 3
回答已采纳
2回答
我试图显示一个div的基础上是否点击按钮，但这似乎不起作用。
组件
<button ng-click="showFormToggle()">Click</button>
<div ng-show="showForm">
</div>
我也试过
<button (click)="showFormToggle()">Click</button>
<div *ngIf="showForm">
</div>
组件类型记录
showFo
浏览 0提问于2018-05-22得票数 0
回答已采纳
2回答
如何在ngIf中使用相同的模板
、、、、
我有很多条件来显示相同的模板。例如：
<template [ngIf]="item.url.indexOf('http') == -1">
<a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >
<span class="media-body media-middle" *ngIf="isUserLoggedIn
浏览 1提问于2017-09-06得票数 6
回答已采纳
我们下面有这样的信息，我知道很多人以前都会看到，所以请给我时间来解释。
NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'
我们使用APP_INITIALIZER加载一些配置，如app.modules.ts文件中所示
{ provide: APP_INITIALIZER, useFactory: initialiseCo
浏览 7提问于2022-01-26得票数 -1
回答已采纳
我正在创建一个简单的应用程序来使用可观察对象测试一些东西，由于某些原因，当我使用ng-template标记包装代码时，HTML根本不会出现。 我之所以在div之前使用这个ng-template，是为了使用*ngIf。最初，我认为*ngIf是问题所在，但当我从模板中删除该语句时，它仍然不起作用。所以If不是问题所在。 有什么想法吗？ <!-- If I remove the <ng-template> tag, the HTML is rendered, but with it, it doesn't work -->
<ng-template>
浏览 10提问于2021-11-11得票数 1
回答已采纳
3回答
我有一个.html文件来显示一些值。我在标记中添加了一个带有"*ngIf“的条件，以找到一个以"Rechercher .”结尾的值。也许我找不到让它工作的方法。我尝试了几种方法，现在我只有一个值为true的布尔值，以确定是否可以在模板之间切换，但他仍然不会打开其中的一个。
原始(工作)
<datalist id="{{row.LISTID}}">
<option value="{{value}}">{{value}}</option>
<option *ngFor="let i o
浏览 3提问于2020-01-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
