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

问题在这里：

getItems(): Observable <IItem[]>

第一期：

使用ng-if="!footer===''" "而不是*ngIf

第二名：

ng-if应为"!footer===''" "或"footer!==''"

即使条件未满足，也会呈现ng-if＆lt; ed; ed元素

1 个答案: