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

【问题标题】：Angular: condition within ngClass attribute always treated as trueAngular：ngClass 属性中的条件始终被视为真
【发布时间】：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 解决了这个问题，谢谢。

标签： css angular typescript data-binding components

【解决方案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 的需求。

【讨论】：