*ngIf 不适用于 ng 模板(离子 5/角度 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>

然而，无论我点击"；拾取自"；或"；交付至"；选项卡/按钮。

关于ng-template或ngIf，我是否做错了什么或不理解什么？正如您所看到的，我正在打印操作选项变量的值，它会为每种类型的单击正确打印。我试过把ngIf放在离子项目、离子网格和许多其他组合中，但都不起作用。

我使用的是Ionic 5和Angular 9。感谢您的帮助。

Answer 1

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

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