标签: angular-ng-if

我正在尝试为angularjs应用程序构建一个弹出窗口(对话框)指令.(仍然很多待...)但是我制作了一个模板文件,它构建了弹出元素,并插入了使用指令元素传递的属性中的值.

问题是,我在该模板中有几个ng-ifs用于检查范围中不同的属性值,然后角度插入像

<!-- ngIf: active -->

前后相关要素.所以我得到注释而不是控制器中$ element参数中的实际元素!

为什么没有角度跳过那里的评论？我怎么能克服那个？

我的模板代码(popup_template.html):

 <div class="{{className}}" ng-if="active" style="{{popupStyle}}" ng-keyup="closeByEscape($event)">
    <div class="vex-overlay" style="{{overlayStyle}}"></div>

    <div class="vex-content" style="{{contentStyle}}">
        <form class="vex-dialog-form" ng-if="type=='plain'">
            <div class="vex-dialog-message" ng-if="message!=null">
                {{message}}
            </div>
        </form>
        <div ng-if="type=='advanced'" class="transcluded">

        </div>
        <div class="vex-close" ng-if="showCloseButton" ng-click="close()"></div>
    </div>
</div>

现在我的角度代码:

app.directive('popup', ['popupfactory', '$timeout', function (popupfactory, $timeout) {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'popup_template.html',
    transclude: true,
    scope: false,
    link: function (scope, element, attrs, $timeout) {

        /* Declarations of all scope variables*/

        /*** Here, element is a comment! …

首先简要描述我想要做什么：我想迭代数组的元素并显示其内容。根据我从数组内的元素获得的信息，我想显示或不显示按钮。

但这似乎行不通。我们看一下代码：

<div class="padding20" ui-view="create-event-form" ng-controller="detailedViewController" ng-init="loadDetails()">
 <button type="submit" class="button success" ng-if="getParticipationStatus(eventDetails._id)">Participate on this event!</button>

正如你所看到的，我通过 ng-if 访问我的DetailedViewController 中的方法。详细视图控制器包含以下方法：

$scope.getParticipationStatus = function( eventId ) {
    var userName = cookieUserManagement.getUsername();
    userClient.getUserEvents( eventId, userName, function ( success, hostingList ) {
        var i = 0;
        var participationStatus;
        if ( success ) {
            hostingList = hostingList.ownEvents;
            if (hostingList.length > 0) {
                for (i = 0; i < hostingList.length; i++) {
                    if (hostingList[i]._id == eventId) {
                        participationStatus = true;
                    } else {
                        participationStatus =  false; …

直接来自angular.io的例子对我不起作用:

<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
show = {{show}}
<br>
<div *ngIf="show; else elseBlock">Text to show</div>
<template #elseBlock>Alternate text while primary text is hidden</template>

相反,浏览器控制台错误:"无法绑定到'ngIfElse',因为它不是'div'的已知属性."

我的模块看起来像这样(我包括CommonModule):

import { CommonModule } from '@angular/common';
import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

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

我经常遇到这个问题。我有一个如图所示的元素

<div class="element-1" *ngIf="isShown"></div>

默认， isShown = false;

点击一个元素，我正在 isShown = true;

现在，在相同的点击回调函数，如果我试图让element-1作为

$('.element-1')，我没有得到该元素，因为当该元素可能不会立即在DOM中出现isShown = true。

我可以使用得到相同的ngAfterContentChecked。但是ngAfterContentChecked打了很多遍。

因此，如何不使用元素ngAfterContentChecked呢？

编辑

这是我的要素

    <app-card-kpi-inline-overlay #kpisOverlay class="child-component all-kpis-overlay-wrap {{selectedView}}" [style.left.px]="kpiLeft" *ngIf="data['openKpiDetails']==true" [cardData]="data"></app-card-kpi-inline-overlay>

这是我的ts方法代码

@ViewChild('kpisOverlay') kpisOverlay: ElementRef;

showKpiSection(i, event, card) {
    card['openKpiDetails'] = !card['openKpiDetails'];
    event.stopPropagation();
    if (card['openKpiDetails']) {
        setTimeout(() => { 
            const el: HTMLElement = this.kpisOverlay.nativeElement; 
            console.log(el); // always showing undefined
        }, 0);
    }
}

我正在尝试切换标志。但是控制台始终在打印undefined。

以下是我的切换元素

<div (click)="showKpiSection(i, $event, data)">Get element</div>

我的Angular模板中需要HTML片段不止一次。我决定不将HTML代码编写多次，而是决定将其放在ng-template元素内，并使用代码中复制的元素。

例如：

<ng-template #myTemplate>
  <h1>Some Header</h1>
  <p>Some text...</p>
</ng-template>

现在如何在模板中的某个位置包含此ng-template元素？

我知道，这可以通过使用ngIf语句来实现，如下所示：

<div *ngIf="false; else myTemplate"></div>

但是，这对我来说就像是肮脏的骇客。还有其他可能性吗？

Error TypeError and Error Context单击提交按钮时出现异常。如果我删除ngIf指令，它将像例外一样工作：Full StackTrace：

PlayerNameFormComponent.html:8 ERROR TypeError: Cannot read property 'value' of undefined
at Object.eval [as handleEvent] (PlayerNameFormComponent.html:8)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:12301)
at SafeSubscriber.schedulerFn [as _next] (core.js:4343)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
at SafeSubscriber.next (Subscriber.js:187)
at Subscriber._next (Subscriber.js:128)

PlayerNameFormComponent.html

<form (ngSubmit)="onSubmit(firstPlayer.value, secondPlayer.value)"> // The line that throws the exception

  <div class="input-field col s6">
    <label for="firstPlayer">First Player Name</label>
    <input #firstPlayer id="firstPlayer" name="firstPlayer" type="text" class="validate">
  </div> …

我正在使用Angular的*ngIf指令来检查用户当前是否已登录.根据用户的身份验证状态(我正在使用Firebase身份验证),应显示登录按钮或用户菜单.这是代码:

html的

<div class="right-side">
    <!-- Header Widget -->
    <div class="header-widget">

    <!-- User Menu -->
    <div class="user-menu" *ngIf="afAuth.authState | async as user; else showLogin">
        <div class="user-name"><span><img src="assets/images/agent-03.jpg" alt=""></span>Hi, {{ ... }}!</div>
        <ul>
            <li><a routerLink="my/profile"><i class="sl sl-icon-user"></i> My Profile</a></li>
            <li><a routerLink="my/bookmarks"><i class="sl sl-icon-star"></i> Bookmarks</a></li>
            <li><a routerLink="my/properties"><i class="sl sl-icon-docs"></i> My Properties</a></li>
            <li (click)="logOut()"><a routerLink="/"><i class="sl sl-icon-power"></i> Log Out</a></li>
        </ul>
    </div>

    <ng-template #showLogin>
        <a routerLink="/login-register" class="sign-in"><i class="fa fa-user"></i> Log In / Register</a>
    </ng-template>

    <a routerLink="/submit-property" class="button border">Submit Property</a>
    </div>
    <!-- Header Widget …

我希望当值隐藏标签NAN使用*ngIf*，但它不工作。

标记的标签是变量的默认值，一旦输入被填充，该值将是一个数字，我希望仅在不包含该值时显示标签 NAN

尝试了什么

     // undefined
    <mat-hint *ngIf="this.cost_liter !== 'undefined'" >cost/liter: {{this.cost_liter}}</mat-hint>
   // 'undefined'
    <mat-hint *ngIf="this.cost_liter !== 'undefined'" >cost/liter: {{this.cost_liter}}</mat-hint>
    //!=
    <mat-hint *ngIf="this.cost_liter != undefined" >cost/liter: {{this.cost_liter}}</mat-hint>
    //!== NAN
    <mat-hint *ngIf="this.cost_liter !== NAN" >cost/liter: {{this.cost_liter}}</mat-hint>
     //!= NAN
  <mat-hint *ngIf="this.cost_liter != NAN" >cost/liter: {{this.cost_liter}}</mat-hint>
     //!== null
   <mat-hint *ngIf="this.cost_liter !== null" >cost/liter: {{this.cost_liter}}</mat-hint>
    // != null
   <mat-hint *ngIf="this.cost_liter != null" >cost/liter: {{this.cost_liter}}</mat-hint>

我确定ngIf可以正常工作，因为我设置了一个条件，如果该值大于0。它可以工作，但仍然不是我的需要

    // > 0
   <mat-hint *ngIf="this.cost_liter != null" >cost/liter: {{this.cost_liter}}</mat-hint>

[ngSwitch]和一堆*ngIfs 有什么区别。我们应该关注任何性能因素吗？

* ngIf

  <div *ngIf="day === 'MONDAY'">
     Keep calm and pretend it's not Monday.
  </div>
  ...
  <div *ngIf="day === 'FRIDAY'">
     Happy Friday!
  </div>

[ngSwitch]

<ng-container [ngSwitch]="day">

     <div *ngSwitchCase="'MONDAY'">
         Keep calm and pretend it's not Monday.
     </div>
     ...
     <div *ngSwitchCase="'FRIDAY'">
         Happy Friday!
     </div>

</ng-container>

最近我在 Angular 中使用了一个带有 else 块的*ngIf指令，并且想知道为什么在Angular 文档中的示例使用分号 ( <div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>) ，因为这似乎也可以在没有分号的情况下工作。

不使用分号有什么副作用吗？或者这只是一种更简洁的编码方式？