ng-if'ed 元素被呈现，即使条件不满足

Question

我刚刚开始在Angular工作。

我正在构建一个组件;只有当这些参数传入时，它的页脚和页眉才应该可见。

panel.component.ts：

    export class PanelComponent implements OnInit {
  @Input() alignment = 'center';
  @Input() color = '';
  @Input() header = '';
  @Input() footer = '';

panel.component.html：

<!--Panel-->
<div class="card" style="width: 22rem;" [ngClass]="(alignment==='left')?'text-left':(alignment==='right')?'text-right':'text-center'">
  <div class="card-header {{color}} white-text" ng-if="!header===''">
  </div>
<ng-content></ng-content>
  <div class="card-footer text-muted {{color}} white-text ng-if="!footer===''" ">
      <p class="mb-0">{{footer}}</p>
  </div>
</div>
<!--/.Panel-->

.html：

    <panel color="success-color">
    <div class="card-body">
        <h4 class="card-title">Special</h4>
        <p class="card-text">Check it out!</p>
    </div>
</panel>

问题是，无论我在 html 中传递什么header或footer，它们实际上都会被渲染;不传递任何东西只会使顶部和底部div为空，而是存在。

我错过了什么？请哈尔普

爱，帕科

Answer 1

问题在这里：

ng-if="!footer===''" "

第一期 ：

使用*ngIf不ng-if

第二：

"!footer===''" "应"footer!==''"或"!(footer==='')"