标签: angular-ng-if

我正在尝试在布尔值上使用 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？

我是web dev和AngularJS的新手.我正在尝试使用指令ng-if只显示div块,如果从数据库返回的列表大于1,但它不起作用.我滥用指令了吗？我环顾四周,找不到任何有效的解决方案.目前,显示两个div并忽略ng-ifs.

<div>
    <div ng-if="listOfThings.length > 1">
        <h1> {{listOfThings.length}} </h1>
        </br>
        <div ng-repeat="thing in listOfThings">
           <label> {{ thing.name }} </label>
        </div>
    </div>
    <div ng-if="listOfThings.length == 1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ listOfThings[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{ listOfThings[0].embed }}" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

我尝试了这个代码,它在Plunker中工作,但由于某种原因不在我的代码中.在我的代码中,只有ng-app有效,但ng-if仍然没有.

    <div ng-app="ngAnimate">
        Click me: <input type="text" ng-model="check" ng-init="check='show'" /><br/>
        Show when check: {{check}}
        <input ng-if="check!='hide'" class="animate-if" placeholder="type the word 'hide'"/>
    </div>

ng-if有时会导致我的页面上的链接在加载时显示,然后消失.

该链接根本不应该显示,我假设ng-if语句尚未处理第二个我能够看到它.

有没有办法阻止链接或元素显示？

我也猜测currentClass对象尚未加载,因此ng-if无法评估,但我试图将其默认为隐藏,直到ng-if可以解决.

<span ng-if="isFaculty && !currentClass.courseInformation.IsCustomCourse">
<a ng-href="{{$window.BasePath}}lms/class/{{$stateParams.classid}}/instructorguide/download">
<span class="cec-msword-icon"></span>Download Instructor Guide</a> 
<span>| </span>
</span>

我想通过使用位于另一个组件中的按钮来显示和隐藏元素.

所以我有一个仪表板,里面有一定数量的腔室和一个标题.

带有app-header和app-chamber的DashboardComponent的HTML:

 <app-header></app-header>
    <div class="container">
      <div class="row">
        <app-chamber [kamers]="kamers"></app-chamber>
      </div>
    </div>

我的ChamberComponent中有*ngIf这个HTML:

<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index">
      <md-card class="chamber wit" *ngIf="kamer.patient == null">
         <p *ngIf="showId">{{kamer.id}}</p>
      </md-card>
</div>

在HeaderComponent中,我有一个需要显示和隐藏元素的按钮:

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  @Input() aList;

  dashboardComponent:DashboardComponent;

  chamberComponent:ChamberComponent;

  constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
    this.dashboardComponent = dashboardComponent;
    this.chamberComponent = chamberComponent;

  }

  ngOnInit() {

  }

// THIS GETS CALLED BY A BUTTON CLICK
  toggleId(){
    this.chamberComponent.toggleId();
  } …

我已经玩了A2一段时间了,我明白我的问题是由于所有内容初始化并在A2中运行的顺序,并且由于*ngIfhtml但是我不明白的是为什么或如何获得我想要的结果.

使用以下测试组件:

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.component.html' })

export class TestComponent implements OnInit {
    test: any;

    settest():void{ 
        //this.test = {test: 1}; --This works using ngAfterViewInit

        //This causes the console.log in ngAfterViewInit to be null
        this.route.params
            .switchMap((params: Params) => this.testService.getTest(params['id']))
            .subscribe(test => {
                this.test = test;
        });
    }

    ngOnInit(): void
    {
        this.settest();
        console.log(document.getElementById('test1')); --Null
        console.log(document.getElementById('test2')); -- Not NUll
    } 

    ngAfterViewInit(): void
    {
        console.log(document.getElementById('test1')); --Null
        console.log(document.getElementById('test2')); -- Not NUll
    } 
}

和 test.component.html

<div *ngIf="test">
    <div id="test1"></div>
</div> …

export interface Element {    
    name: string;   
}

export class Room implements Element {
name: string; 
type:string
}

export class Hall implements Element {
name: string;
}

我的varibale类型如下所示

selectedElement: Element;

现在在HTML中我如何检查对象是否具有属性'类型'？

<div *ngIf="selectedElement?.type">
my div
</div>

我想在某些网格车组件中呈现可观察到的数组对象。另外，我想基于组件中的变量（即gridCols*maxRows使用*ngIf条件检查）将网格卡的数量限制为一个值。

我知道这是不可能同时使用*ngFor，并*ngIf同时在相同的元素。因此，我需要使用<template ngFor ...> 包装我的网格卡元素，这些元素将根据进行有条件的渲染*ngFor。鉴于此，我怎么可以参考index或content从变量*ngFor在*ngIf。

<template ngFor let-content [ngForOf]="contentObjectsObservable | async" let-i="index" [ngForTrackBy]="trackByFn">
    <grid-card *ngIf="i < gridCols*maxRows" [content]="content" [style.width.%]="gridCardWidth"></grid-card>
</template> 

更新

我已经尝试过这样的事情

 #i="index"

与这样的错误信息：

没有将“ exportAs”设置为“ index”的指令

我定义Todo如下:

export class Todo {
  id: number;
  title: string;
  complete: boolean = false;
  editMode: boolean = false;
  }

我有以下数据服务:

  getAllTodos(): Observable<Array<Todo>> {
     return this.aHttpService.get<Array<Todo>>('http://localhost:3000/todos');
  }

然后,我有这个组件:

import { Component, OnInit } from '@angular/core';
import { TodoDataService } from '../todo-data.service';
import { Todo } from '../todo';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-all-tasks',
  templateUrl: './all-tasks.component.html',
  styleUrls: ['./all-tasks.component.css']
})
export class AllTasksComponent implements OnInit {
  constructor(private todoDataService: TodoDataService) {}
  allTodos: Observable<Array<Todo>>;

  ngOnInit() {
    this.allTodos = this.todoDataService.getAllTodos();
  }
} …