标签: angular-ng-if

在下面的模板中,我希望脚本标记永远不会呈现,并且警报脚本永远不会执行.不过确实如此.

<div ng-if="false">
    <script>alert('should not run')</script>
    Should not appear
</div>

这导致我们在移动设备上出现巨大的性能问题,因为我们在ng-ifs中包含大型DOM和指令结构,期望它们在条件为假时不会呈现.

我也测试了ng-switch哪种行为方式相同.

这是预期的行为吗？有没有办法避免不必要的渲染？

的jsfiddle

在我的应用程序中,我尝试放置一个按钮,显示/隐藏带有布尔组件属性的输入字段.如果按钮显示输入,则应在输入上设置焦点.但它似乎不起作用.如果我删除input焦点指令工作正常.

我创造了一个显示我的意思的plunker.描述我的"问题"有点困难.

组件中的html

<input *ngIf="filterShow.options"
       [focus]="filterFocus.options"
       [(ngModel)]="filter.options">

<button type="button"
        (click)="setShowFilter('options')">
  focus
</button>

setShowFilter()函数

private setShowFilter(filter: string) {
  this.filterShow[filter] = !this.filterShow[filter];

  /* reset filter */
  this.filter[filter] = "";

  this.filterFocus[filter].emit(true);
}

focus.directive.ts

@Directive({
  selector: '[focus]'
})
export class FocusDirective implements OnInit {

  @Input('focus') focusEvent: EventEmitter<boolean>;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnInit() {
    this.focusEvent.subscribe(event => {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    });
  }
}

我使用的角度,我想从一个变量,它是JSON形式.I'm能够做到这一点的显示数据*ngfor而且我希望把它检查是否msg.who =="博特"的条件我正在这样做:

<div class="UserWrapper" *ngFor="let msg of msgs" ngIf="msg.who == 'User ">
    <div class=""></div>
        <div class = "speech-bubble1 z-depth-5"><p>{{msg.msg}}</p>
            <p class="timeRight">{{msg.time}}</p>
    </div>
 </div>

我不知道如何使用ng如果另一种方式,但这样做我得到以下错误.

ERROR Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: 
StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: 
NullInjectorError: No provider for TemplateRef!

我该如何检查给定的条件

是否可以在HTML中使用ng-if中的"大于"比较器？问题是">"符号过早地关闭了HTML标记.

恩.这个:<div ng-if="foo>0" class="bar"> (HTML STUFF) </div>

读作: <div ng-if="foo"> (0 class="bar"> HTML STUFF) </div>

我最后通过使用ng-if ="foo!= 0"来解决这个问题,但我可能会使用小于比较器,但我只是好奇,以防我因某种原因绝对不能使用大于符号.或者我是否可能必须将此逻辑移动到其他地方,例如在我的控制器中,而不是在我的视图中？

编辑1 所以看起来似乎比较器本身不是问题,我的代码中还有其他东西正在发生.奇怪的是,当我在比较器之前和之后有空位时,它可以工作,但是没有空格则没有.如果这意味着什么,我也使用棱角1.3.15.

<div class="paginate" ng-if="list.total > 0"> 作品

<div class="paginate" ng-if="list.total>0"> 不起作用

我正在试验Angular 2.我有一个有两个组件的工作测试应用程序.这一切都有效,但在我尝试使用时崩溃了*ngif

关于这个问题已经有很多问题,但大多数答案都指向导入"BrowserModule"来解决问题.就我而言,我已经这样做了.还有什么可能导致这个问题？

我的HTML

<table class='table' *ngif="products && products.length">

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { CrazyComponent }  from './products/crazy.component';

@NgModule({
      imports: [ BrowserModule ],
      declarations: [ AppComponent, CrazyComponent ],
      bootstrap: [ AppComponent ]
})
export class AppModule { }

完整的错误:

无法绑定到'ngif',因为它不是'table'的已知属性.嵌入式模板上的任何指令都未使用的属性绑定ngif.确保属性名称拼写正确,并且所有指令都列在"指令"部分中

我有一个测试,检查部分DOM元素是否已被ngIf删除.当我使用以下方法检查DOM时:fixture.debugElement.query(By.css(".button-area"))它result是nullDOM元素或者是DOM元素.

如果result是null,那么以下测试工作正常.但是,如果测试result包含一个元素,它不会简单地通过测试,它会冻结浏览器.

测试看起来像这样:

var result = fixture.debugElement.query(By.css(".button-area"))
expect(result).toBe(null)

我也尝试过expect(result).toEqual(null),.toBeFalsy()结果相同.

测试DOM元素是否已正确删除的正确方法是什么？

更新 1/23/2017

我发现这个问题是由返回的元素指定的:

fixture.debugElement.query(By.css(".button-area"))

这可能是角2或茉莉的错误.如果我使用document.getElementByClassName("button-area")它不是一个问题,测试工作正常.

我一直在收到错误

无法绑定到'ngIfElse',因为它不是'ul'的已知属性.

我肯定在某个地方,我犯了一个愚蠢的错误但找不到它.

<ul *ngIf="!finished; else elseBlock" id='time'>
  <li id='hour' class="chart"  data-percent="100"><span>{{hour}} </span></li>
  <li id='min' class="chart" data-percent="100"><span>{{minute}}</span></li>
  <li id='second' class="chart" data-percent="100"><span>{{second}}</span></li>
</ul>
<ng-template  #elseBlock>  <h4 id='time'>DONE</h4> </ng-template>

请考虑以下代码示例:

<div *ngIf="condition; else elseBlock">
    <!-- markup here --> 
</div>
<ng-template #elseBlock>
     <div>
         <!-- additional markup here -->
     </div> 
</ng-template>

我可以实现相同功能的另一种方法是:

<div *ngIf="condition">
    <!-- markup here --> 
</div>
<div *ngIf="!condition">
     <!-- additional markup here -->
</div>

我想知道应该使用这两种方式中的哪种方式的具体原因以及原因？

我有很多条件来显示相同​​的模板。例如：

<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 == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 0">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<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 == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 2">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == …

是的,所以我有一个包含以下模板的标题组件(navbar):

<ng-template [ngIf] = "authService.isAuthenticated()">
  <li>
    <a routerLink="Landing" class="navbar-brand" (click)="Logout()"><span class="xvrfont">Logout</span><i class="fa fa-sign-in" aria-hidden="true"></i></a>
  </li>
  <li>
    <a routerLink="Profile" class="navbar-brand"><span class="xvrfont">{{authService.getUsername()}}</span><i class="fa fa-user-circle" aria-hidden="true"></i></a>
  </li>
</ng-template>

当用户通过身份验证时,导航的这一部分应该是可见的.找出它通过authService检查.

要检查用户是否已通过身份验证,将在每次路由更改时运行以下代码:

checkAuthenticated(){
   if  (localStorage.getItem('token') != null){ this.authenticated = true; }
   else { this.authenticated = false; }
   console.log(this.authenticated); // for Debugging. 
}

NgIf语句调用此方法:

public isAuthenticated(){
     return this.authenticated;
}

根据日志,"证实" 的真假之间切换正确,但Ngif不响应的变化不知何故.

标头component.ts看起来像这样:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {AuthService} from "../auth/auth.service";

@Component({
  selector: 'app-header',
  providers: [AuthService],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  encapsulation: ViewEncapsulation.None …