标签: angular-ng-if

场景：我正在开发一个项目，我必须使用按钮显示管弦乐队的不同组件。我所做的是在我的类中设置一个名为“组件”的变量，如下所示：

import { Component, OnInit } from '@angular/core';

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

component:string

ngOnInit() {

  }
}

并创建了一个接收参数“ins”（对于仪器）并将变量值更改为该参数的方法：

selected(ins){
  this.component = ins
}

在我的模板上我做了一些按钮和 div：

<button (click)="selected('violines')">violines</button>
<button (click)="selected('percussion')">percussion</button>
<button (click)="selected('doublebass')">double bass</button>

<div *ngIf="component === 'violines'">All the violines here</div>
<div *ngIf="component === 'percussion'">All the percussion here</div>
<div *ngIf="component === 'doublebass'">All the doublebass here</div>

问题：

到目前为止一切都很完美，但我想制作一个在屏幕上显示所有乐器的按钮，所以我考虑制作一个将“ins”变量设置为值“all”的按钮，但我不知道这是否是可以使用 *ngIf 检查变量的两个值，如下所示：

<div *ngIf="component === 'violines' or 'all'">All the violines here</div>

在我的角度navbar我有一个*ngIf而不是或不登录/注销按钮应该显示

*ngIf="!authService.loggedIn()

它使用带有此 LoggedIn 函数的服务，该函数返回 true 或 false

  loggedIn() {
    return this.http.get('http://localhost:3000/users/validateToken')
      .map(res => res.json()).map(data => data.success);
  }

但这是异步的，我如何等待ngIf它？或者我怎样才能以不同的方式得到相同的结果？

随着我之前的问题的扩展，这里是我需要在其他部分使用模板的另一种情况*ngIf

这是我当前的代码，我在每个页面上使用加载微调器，直到 API 响应返回

   <ng-container *ngIf="!isLoading; else spinner">
         <form [formGroup]="myForm" novalidate (ngSubmit)="submit()" >
            // form content 
         </form>
    </ng-container>
    <ng-template #spinner>
        <div class="fa-3x tc">
            <i class="fas fa-spinner fa-spin"></i>
        </div>
    </ng-template>

这样我们必须在每个页面上编写相同的#spinner组件，所以我创建了一个具有相同内容的组件。

import { Component } from '@angular/core';

@Component({
    selector: 'app-display-loading',
    styles: [`.load__spinner { color: black; text-align: center; font-size: 30px;}`],
    template: `
        <ng-template>
            <div class="load__spinner"> <i class="fas fa-spinner fa-spin"></i></div>
        </ng-template>
    `,
    preserveWhitespaces: true
})

export class DisplayLoadingComponent {
    constructor() {
        console.log('display loading called');
    }
}

现在我的问题是如何<app-display-loading> …

我正在使用 angular 6 应用程序。我有一个 textarea，我想在页面加载后立即关注它。我不能这样做。

这是页面的样子：

<div fxLayoutAlign="begin">
  <button mat-button color="primary" [routerLink]="['/Administration']">
    <i class="far fa-arrow-alt-circle-left"></i> Back to Administration
  </button>
</div>
    <div class="app-loading" *ngIf="_loading">
      <mat-spinner diameter=100></mat-spinner>
    </div>
    <div *ngIf="!_loading">

    <div class="knowledgeBody">

      <div *ngIf="_mode === 'view'">
        {{ _knowledgeText }}
        <div fxLayoutAlign="end">
          <button mat-button (click)="edit_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}">
            <i class="fas fa-edit"></i> Edit
          </button>
        </div>
      </div>

      <div *ngIf="_mode !== 'view'">
        <textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>
          {{ _knowledgeText }}
        </textarea>

        <div fxLayoutAlign="end">
          <button mat-button (click)="save_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}">
            <i class="fas fa-save"></i> …

我开发了一个 Angular 应用程序。我想在我的应用程序未投入生产时显示一些文本，否则什么也不显示。我有以下代码，其中环境是可观察的：

<span *ngIf="(environment | async) !== 'production'">bla bla text...

问题在于，只要可观察对象未解决，它就会显示内容。

我认为这可以解决：

undefined !== 'somestring'

因此条件得到验证并显示文本。这不是我想要的，我想要在可观察值解析之前不显示、不评估表达式。

我应该使用什么语法来防止出现不需要的内容？

谢谢你的帮助

我ngIf在其中添加条件，ng-container如果条件满足则display the component

我面临的问题是我收到错误

 This condition will always return 'false' since the types 'boolean' and 'string' have no overlap.

当我将条件设置为（当我使用时not operator after &&）

<ng-container *ngIf="data.dataClass === 'Dokes'
       && !data.dataSubclass === 'Land'"> ------------------>   NOT OPERATOR

!但是当我删除其中的运算符时，代码工作正常 && !data.dataSubclass === 'Land'

我不知道为什么它给我这个错误。我想添加!运算符为I want to display component when data.dataSubclass is not equal to 'Land'

.html 文件

  <div>
      <ng-container *ngIf="data.dataClass === 'Dokes' 
       && !data.dataSubclass === 'Land'">-----------------------------> ERRORRR

!----- BELOW IS THE COMPONENT TO …

我正在尝试在值为null或空数组时执行ng-hide(在Firebug中,这显示为[]).

我可以通过以下方式执行null:

ng-hide="myData.Address == null"

但是,当我尝试:

ng-hide="myData.Address == null || myData.Address == []"

该值仍然出现.

我想隐藏一个div取决于我在json中的值

例如,我有{{product.currency}},值可以是:£或€如果值相等€我想隐藏这个元素.

我正在根据建议的角度角度形式验证错误示例方法显示反应形式错误消息。

在页面上显示错误的html代码：

<div [formGroup]="myForm">
  <div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.firstName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.firstName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  <div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.lastName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.lastName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  </div>

仅供参考以下我的组件代码：

this.myForm = this.formBuilder.group({
      firstName:['',[Validators.required,Validators.maxLength(50)]],
      lastName:['',[Validators.required,Validators.maxLength(50)]]
    })

如果看到上面的代码，则对我的firstName和lastName字段应用了两个验证。

为了显示错误消息，我编写了多个* ngIf条件来显示错误消息。

有什么最好的方法来显示特定控件的验证消息而无需编写多个* ngIf条件？，因为我一次又一次地编写相同的代码，而使用不同的控件名称和验证者名称来显示错误消息。

我正在使用第8版开发有角度的应用程序。在ngIf表达式内部，我想检查数组中是否存在存在。所以我写了下面的表达式：

*ngIf="questionniare.factors.some(item => item.intensities.length > 0)"

但是现在我在控制台窗口中收到此错误：

解析器错误：绑定不能包含[questionniare.factors.some（item => item.intensities.length> 0）]中第34列的赋值

但是，正如我所见，我的状况没有任何任务。那么有什么问题，我该如何解决？

（我知道我可以定义一个方法并在该方法内完成这项工作，但是我想知道这是否对ngIf有限制，我下次应该考虑一下吗？）