* ngIf не работает с ng-template (ioni c 5 / angular 9) - PullRequest
Новая
       98

* ngIf не работает с ng-template (ioni c 5 / angular 9)

0 голосов
/ 13 июля 2020

Вот мой файл 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? Как видите, я печатаю значение переменной opchoice, и оно печатается правильно для каждого типа щелчка. Я пробовал помещать ngIf в элемент ion-item, в ion-grid и многие другие комбинации, но ни одна из них не работает.

Я использую Ioni c 5 с Angular 9. Любая помощь приветствуется .

1 Ответ

1 голос
/ 14 июля 2020

Как я уже сказал, вы должны разместить 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>
...