标签: angular-ng-if

我一直在收到错误

无法绑定到'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 == …

当我想创建隐藏的东西时ng-show你可以添加,class="ng-hide"所以css会预先隐藏元素.这样,当页面仍在加载时,不会显示元素

我想做同样的事情,ng-if但我不知道该怎么做

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

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

<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; …

我最近开始学习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 class="text-red">{{item.status}}</h2>
</div>
<div [ngIf]="item.status > 25 && item.status < 75">
<h2 class="headline text-orange">{{item.status}}</h2>
</div>
<div [ngIf]="item.status > 75">
<h2 class="headline text-green">{{item.status}}</h2>
</div>

或者任何与使用 ngSwitch、ngSwitchWhen 语句有关的内容。

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

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

我正在尝试在布尔值上使用 ngif 显示元素，如下所示：

<li *ngIf="!include == true">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

我的 include var il 初始化为 false 并像这样切换状态：

this.localStorageService.getCurrentUser().then((res) => {
      this.userProfile = res;
       if(this.song.likes.includes(this.userProfile._id)){
         this.include = true
       }
      this.classHeart();
    });

谢谢大家 ！

我遇到了以下问题，该问题已由{static: false}中的属性修复@ViewChild。\n此 stackoverflow Q/A 帮助解决了How should I use the new static option for @ViewChild in Angular 8? 。

我想更好地理解这个场景以及如何static改变结果，以及变化检测如何影响这个场景。我已经阅读了角度文档中有关更改检测的一些内容，并发现极其缺乏。

我想出了一个 stackblitz 来说明一些我不明白的事情。Stackblitz 角度示例

单击toggle按钮两次时，我在命令行上收到以下内容：

> undefined undefined\n> undefined undefined\n> undefined ElementRef\xc2\xa0{nativeElement: div}\n> undefined ElementRef\xc2\xa0{nativeElement: div}\n\n

不过我期望：

> undefined undefined\n> undefined ElementRef\xc2\xa0{nativeElement: div}\n> ElementRef\xc2\xa0{nativeElement: div} ElementRef\xc2\xa0{nativeElement: div}\n> ElementRef\xc2\xa0{nativeElement: div} ElementRef\xc2\xa0{nativeElement: div}\n\n

这是代码的逻辑——（请参阅 stackblitz 中的完整代码）

> undefined undefined\n> undefined undefined\n> undefined ElementRef\xc2\xa0{nativeElement: div}\n> undefined …

使用 an 时*ngIf，您可以执行类似的操作*ngIf = (value$ | async).property as prop ，然后在整个代码中使用，而无需每次都prop重复 long 。(value$ | async).property 然而，这仅在 是真值时才有效(value$ | async).property- 例如，如果它为零，则无效。

as我的问题是 -如果值是假的，我怎样才能仍然获得好处但仍然让元素显示？as或者更好的是，有没有办法在 an 之外使用*ngIf？