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

Question

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

1. 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>
   

2. 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 变量相对应的正确 bool 值。然而经过测试，我发现 ngClass 始终将输入值 showMe 视为 true。

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

Answer 1

您的 showMe 输入未正确绑定(bind)到 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 的需求。