*ngIf 不适用于 ng-template (ionic 5/angular 9)

Question

这是我的 component.page.ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-domestic',
  templateUrl: './domestic.page.html',
  styleUrls: ['./domestic.page.scss'],
})
export class DomesticPage implements OnInit {
  opchoice: string;

  constructor() { }

  ngOnInit() {
    this.opchoice = "From";
    console.log("OnInit opchoice? " + this.opchoice);
  }
  onFromToChange (ev: any) {
    console.log("OnFromToChange");
    this.opchoice = ev.detail.value;
    console.log("opchoice? >" + this.opchoice + "<");
  }
}

和 HTML 文件。

<ion-content>
  <ion-segment value="From" (ionChange)="onFromToChange($event)">
    <ion-segment-button value="From">Pickup From</ion-segment-button>
    <ion-segment-button value="To">Deliver To</ion-segment-button>
  </ion-segment>
  <div *ngIf="opchoice=='From'; then ShowFrom else ShowTo">
    <ng-template #ShowFrom class="ion-text-wrap ion-no-padding ion-no-margin">
            <ion-item>Domestic - Ship From</ion-item>
    </ng-template>
    <ng-template #ShowTo class="ion-text-wrap ion-no-padding ion-no-margin">
      <ion-item>Domestic - Ship To</ion-item>
    </ng-template>
  </div>
</ion-content>

但是，无论我点击“取件自”还是“递送至”，页面都没有显示任何内容（它是空的）Tabs/buttons。

有没有我做错了什么或者对ng-template或ngIf没有理解的地方？如您所见，我正在打印 opchoice 变量的值，并且它会针对每种类型的点击正确打印。我试过将 ngIf 放入离子项目、离子网格和许多其他组合中，但 none 有效。

我将 Ionic 5 与 Angular9 一起使用。感谢任何帮助。

Answer 1

正如我之前所说，您必须将 ng-templates 放在同一级别。对我来说最干净的解决方案是：

<div class="ion-text-wrap ion-no-padding ion-no-margin">
  <div *ngIf="opchoice=='From'; else ShowTo">
    <ion-item>Domestic - Ship From</ion-item>
  </div>
  <ng-template #ShowTo>
    <ion-item>Domestic - Ship To</ion-item>c
  </ng-template>
</div>

*ngIf 不适用于 ng-template (ionic 5/angular 9)

*ngIf doesn't work with ng-template (ionic 5/angular 9)

angular-ng-if

ng-template

angular9

ionic5