带动画的ngIf将无法呈现

Question

我有2个单独的div，根据list_length属性进行渲染。出于某种原因，如果另一个页面存在，它们都无法在同一页面上呈现。

例如，以下2个div加载独立。意思是我评论一个而离开另一个：

1）

  <div class="card-footer" *ngIf="expandable && list_length == 1">
    <div class="expandable"
         *ngIf="expandable && list_length > 0"
         style="height: 71px;"
    >
      <ion-list class="awaken bordered" no-lines>
        <ng-content select="[card-list]"></ng-content>
      </ion-list>
    </div>
  </div>

2）

<div class="card-footer" *ngIf="expandable && list_length != 1">

    <div class="expandable"
         *ngIf="expandable && list_length > 0"
          [@heroState]="isExpanded ? 'active' : 'inactive'"
    >
      <ion-list class="awaken bordered" no-lines>
        <ng-content select="[card-list]"></ng-content>
      </ion-list>
    </div>
</div>

但如果我同时取消注释（应该渲染），只有第一个功能正常。是什么导致这个？好像我的ngIf应该有效。

添加完整文件（if语句稍有不同）

<!-- AwakenCard Component -->
<ion-card class="awaken" [class.expansion]="isExpanded">
  <ion-card-content style="border-bottom: 1px solid rgba(0,0,0,.125)">
    <ion-grid>
      <ion-row align-items-center justify-content-around>
        <ion-col col-4 padding-left>

          <ng-content select="[card-icon]"></ng-content>

        </ion-col>
        <ion-col col-8 text-right padding-right>
          <p class="card-title fs-24 light">{{ title }}</p>
          <p class="stat fs-32 heavy">{{ subtitle }}</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card-content>

  <ion-toolbar class="other-card-part" style="background: #f9f9f9;" *ngIf="expandable">
    <ion-buttons class="align-items-center">
      <span start item-start padding-left style="line-height:32px;">
        {{ list_length }} {{ list_length == 0 ? type[1] : list_length == 1 ? type[0] : type[1] }}
      </span>

      <button item-end end
        ion-button small clear
        style="float:right;"
        (click)="toggleSection()"
        [disabled]="list_length == 0"
      >
        {{ isExpanded ? '- Collapse' : '+ Expand' }}
      </button>
      <button
        *ngIf="editable"
        padding-right
        style="line-height: 32px"
        ion-button small clear
        style="float:right;"
        color="danger"
        (click)="toggleEdit()"
      >Edit</button>
    </ion-buttons>
  </ion-toolbar>

  <div class="card-footer">
    <div class="expandable" *ngIf="expandable && list_length > 1"
         [@heroState]="isExpanded ? 'active' : 'inactive'">
      <ion-list class="awaken bordered" no-lines>
        <ng-content select="[card-list]"></ng-content>
      </ion-list>
    </div>

    <div class="expandable" *ngIf="expandable && list_length == 1"
         style="height: 71px;">
      <ion-list class="awaken bordered" no-lines>
        <ng-content select="[card-list]"></ng-content>
      </ion-list>
    </div>

    <div class="expandable" *ngIf="expandable && list_length == 0">
      <ion-list class="awaken bordered" no-lines>
        <ng-content select="[card-list]"></ng-content>
      </ion-list>
    </div>

    <div class="fade-out-box" style="height:30px;width:100%" *ngIf="list_length != 0">
    </div>
  </div>

  <div class="card-footer" *ngIf="!expandable" style="border-top: none;">
    <ng-content select="[card-footer]"></ng-content>
  </div>
</ion-card>

@Component({
  selector: 'awaken-card',
  templateUrl: 'awaken-card.html',
  animations: [
    trigger('heroState', [
      state('inactive', style({
        height: '120px',
      })),
      state('active',   style({
        height: '*'
      })),
      state( 'special', style({
        height: '71px'
      })),
      transition('inactive => active', animate('300ms ease-out')),
      transition('active => inactive', animate('300ms ease-out'))
    ])
  ]
})
export class AwakenCardComponent {


  @Input() title: string;
  @Input() special: boolean = false;
  @Input() subtitle: string;
  @Input() type: string[];
  @Input() expandable: boolean = false;
  @Input() show_fade: boolean;
  @Input() items: any[];
  @Input() list_length: number;
  @Input() isExpanded: boolean;
  @Input() editable: boolean = false;
  @ViewChild('expandable_section') expandable_section: ElementRef;

  constructor( private animService: AnimationProvider, private rd: Renderer2 ) {
    console.log(this)
  }

  ionViewDidLoad() {
    if ( this.isExpanded === null ) { this.isExpanded = false }
  }

  toggleSection() {
    this.isExpanded = !this.isExpanded
  }

}