Angular：ngClass 属性中的条件始终被视为真

Posted 2023-02-23

【中文标题】Angular：ngClass 属性中的条件始终被视为真

【英文标题】：Angular: condition within ngClass attribute always treated as true

【发布时间】：2018-07-22 17:36:23

【问题描述】：

我正在尝试在下面的“EditDialogComponent”中设置 CSS 类（这是一个模式视图），具体取决于从“AppComponent”设置的名为“showMe”的输入属性：

html 代码：

<div [ngClass]="showMe? 'ui active modal': 'ui modal'">
  <i class="close icon"></i>
  <div class="header">
    Edit
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Cancel
    </div>
    <div (click)="clk()" class="ui positive right labeled icon button">
      OK
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

TypeScript 代码：

import  Component, Input, Output, OnInit  from '@angular/core';

@Component(
  selector: 'edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
)
export class EditDialogComponent implements OnInit 

  @Input() subject: string
  @Input() showMe: boolean

  constructor()  

  clk() 
    window.alert(this.showMe)
  
  ngOnInit() 
  

这是用于将“EditDialogComponent”包含到“AppComponent”中的 HTML 代码：

<edit-dialog showMe="show_edit_modal" subject='foobar'></edit-dialog>

问题是，每当我点击模态框的“确定”按钮时，我总是得到与AppComponent 的show_edit_modal 变量相对应的正确布尔值。然而经过测试，我发现ngClass 总是将输入值showMe 视为true。

为什么ngClass 总是将输入属性视为真？

【问题讨论】：

改用[showMe]="show_edit_modal"。

@Zircon 解决了这个问题，谢谢。

【参考方案1】：

您的showMe 输入未正确绑定到show_edit_modal。 而不是：

<edit-dialog showMe="show_edit_modal" subject='foobar'></edit-dialog>

你应该有：

<edit-dialog [showMe]="show_edit_modal" subject='foobar'></edit-dialog>

这将导致showMe 由父级的show_edit_modal 设置（和更新）。

一般来说，您永远不需要在任何 html 标记中使用插值 ( )。通常有一种不同的、更恰当的方式来表达你对 Angular 的需求。