标签: angular-ng-if

我有两个按钮使用 ng-if 来确定是否应该显示它们。短暂的一秒钟，即使它们不应该一起显示，也会显示这两个元素。在孤立的例子中，这工作正常，但在我的项目中它有一些延迟。与这篇文章非常相似：Angular conditional display using ng-if/ng-show/ng-switch 简要显示了这两个元素，但没有任何与我尝试过的答案不同的答案。

<button class="btn btn-primary drop_shadow" ng-if="vm.ingestReady == true"
                ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak> Start Ingest
</button>
<button class="btn btn-danger drop_shadow" ng-if="vm.ingestReady == false"
                ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak>Cancel Ingest
</button>

控制器代码是

vm.ingestReady = true;

在页面加载时。所以点击按钮应该只是切换视图，但有那么一秒钟，两者都是可见的。

问题

在下面的代码中,我试图根据它们的类别显示它们的所有Projects(对象)Tab.

类别必须是等同的.

编辑:如果不清楚,请看这里.

这是我的代码:

<md-tab-group>
    <md-tab *ngFor="let tab of tabs">

        <template md-tab-label>
            {{tab.name}}
        </template>

        <h1 *ngFor="let project of projects" *ngIf="tab.category == project.category">
            Project Name: {{project.name}}
        </h1>

    </md-tab>
</md-tab-group>

我想要实现的目标:

我正在尝试迭代选项卡并将每个选项卡的名称添加到选项卡的"模板".

然后,我试图遍历项目,如果项目的类别与选项卡的类别匹配,那么它将显示在选项卡下.

我

由于某种原因,它似乎不起作用.难道我做错了什么 ？
对不起,我的逻辑,过去两天都醒了!

我的页面上有一些内容，这些内容都包裹在ng-if中，如下所示：

            <div ng-if="ShowMessgae" class="text-danger">
                <p>
                    <strong>
                        Message displayed to User
                    </strong>
                </p>
            </div>

然后在我的angular js控制器中，我有以下内容：

function MyController($scope, $q, notifyHelper) {
    openAjaxLoaderGif();

    $scope.ShowMessgae = false;

    MyService.getVarsFromSession().then(function (result) {
       // some code removed for brevity
       if(some coditional) {
        $scope.ShowMessgae = true;
       }

        }, function (data, failReason, headers) {
            notifyHelper.error("Error has occurred - try again");
        })
    })
    .finally(function () {
        closeAjaxLoaderGif();
    });
};

我将ShowMessage的值设置为false，并且只有在满足特定条件的情况下才为true。在大多数情况下，ShowMessage将为false。但是，这导致当页面加载显示给用户的标记消息时短暂呈现的消息，然后消失（以显示我的期望）-我做错了什么导致此闪烁吗？

我有ngFor循环显示数据,并根据在该循环中是否为true或false,我如何更改css？我试过的,对我不起作用.

HTML

<div class="class" *ngFor="let something of something" [ngClass]="{'classno2': sent}">
    <div> {{something.name}}
    </div>
</div>

打字稿

something;

this.something = [
    {name: "NAMEE", sent: false},
    {name: "NAMEE2", sent: true},
]

CSS

.class {
    color: red;
}
.classno2 {
    color: blue;
}

我没有错误,但没有任何改变.

我们现在可以有else片段,指的是<ng-template>:

<div *ngIf="condition; else not">
  Condition satisfied.
  <ng-template #not>
    Condition not satisfied.
  </ng-template>
</div>

我想是能够引用片段的上下文之外*ngIf--something像

<div>DIV1 <ng-template-call template="shared"></ng-template-call></div>
<div>DIV2 <ng-template-call template="shared"></ng-template-call></div>

<ng-template #shared>This is a shared snippet.</ng-template>

写ng-template-call上面我所说的正确方法是什么？

是的,我知道我可以把它变成一个单独的组件,但它没有达到那个水平.我总是可以写:

<div *ngIf="false; else shared">

但这看起来很笨拙.

我在 angular 4 中有以下 HTML 组件：

<div  *ngFor="let item of items; let i = index" class="row">
      <div class="col-md-7">
            <select 
              class="form-control form-control-sm" 
              name="durationTime{{i}}" 
              required 
              [(ngModel)]="item.durationTime"
              #durationTime{{i}}="ngModel"
              [ngClass]="{'is-valid': durationTime{{i}}.valid && durationTime{{i}}.touched, 'is-invalid': durationTime{{i}}.invalid && durationTime{{i}}.touched}">
                <option [ngValue]="null" disabled  selected>Elige</option>
                <option *ngFor="let item of durationTimes" [ngValue]="item"> {{item}} </option>
            </select>
            <small *ngIf="durationTime{{i}}.invalid && durationTime{{i}}.touched"
              class="form-text text-muted-error">
                !Debes seleccionar una opción!
            </small>
        </div>
    </div>

我需要验证控件，但出现此错误：

Parser Error: Got interpolation ({{}}) where expression was expected at column 25 in [{'is-valid': durationTime{{i}}.valid && durationTime{{i}}.touched, 'is-invalid': durationTime{{i}}.invalid && …

我想隐藏一个 div 并想显示另一个我在代码下面写的

我的代码

我的问题是我在 ngIf 中使用了多个条件但无法正常工作。单击“显示子内容 1”后，我想隐藏主要内容并希望显示所有按钮的“子内容 1”，反之亦然。我该怎么做。请帮忙。

我知道你们中的一些人会对这个问题感到畏缩，因为我知道我所问的并不是最佳实践。然而，无论如何我都会问，并希望将虐待降到最低。

当条件语句为 false 时，ngIf 从 DOM 中删除元素。是否有设置、标志、参数等可以改变 ngIf 的行为，以便元素保留在 DOM 中并设置为 display: none ？我不是在寻找解决方法，例如 [hidden]，但我想知道是否可以更改 *ngIf 的行为。

我很快（这是关键字）更新了现有的 jQuery 项目。该项目正在对手风琴使用“.toggle()”方法。作为更新的一部分，手风琴项目现在使用 ngIf 进行过滤。因为 jQuery 代码会在应用程序加载时初始化手风琴，并使用 ngIf 删除它们，“未初始化”它们。

我使用了一种解决方法来解决该问题。但我仍然很好奇是否可以选择更改 ngIf 的行为。

我在 Angular 组件上有以下可观察的内容：

count$: Observable<number>;

this.count$ = this.getCount();

通过使用以下内容，我得到值 0（零）；

this.count$.subscribe(x => console.log(x));

在模板上我有：

<a routerLink="/dash" *ngIf="(count$ | async)">
  <ng-container *ngIf="count$ | async as count">
    Count: {{count}}
  </ng-container>
</a> 

如果count$是 1，我得到Count: 1，但如果count$是 0，内容Count: 0甚至不会呈现。

知道为什么吗？

我知道你永远不应该在 Angulars 模板表达式中使用函数调用，否则它们将被永久调用，并且应用程序将承受极大的压力。（请参阅Medium - 为什么你不应该在 Angular 模板表达式中使用函数调用）

我也知道，当使用 []-array-operator 时，这是可以的。例如

<div *ngIf="array[i]"></div>

有谁知道在这样的模板表达式中使用函数 Map.prototype.get() 是否可以？

<!-- the Map is structured like Map<Object, Object[]> -->
<ng-container *ngFor="let elem of someMap.get(keyToAnArray)">
    <app-some-compo [elem]="elem"></app-some-compo>
</ng-container>