css - Angular:ngClass属性中的条件始终视为true

我试图在下面的“ 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>

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

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

最佳答案

您的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可以表达出您所需要的东西，这是另外一种更合适的方式。

关于css - Angular:ngClass属性中的条件始终视为true，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48748348/