Question

我正在尝试在下面的'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？

Answer 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所需的内容。

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

1 个答案: