Question

所以我有2个部分，我只希望其中一个可见，具体取决于用户的输入。

当用户在第一个“类型”输入中选择“每日”时，我希望显示第1部分（输入开始日期和小时）。如果用户选择其他任何类型，我希望第2部分显示（输入开始日期）。

我对编码和离子学还很陌生，我四处张望，找不到答案。这是我到目前为止所做的，但是没有用。

这是html：

<ion-content>

<h2>Type:</h2>
<ion-item>
        <ion-select class="input"[(ngModel)]="type" placeholder="Please select" (click)="type()" text-right>
          <ion-option value="Annually">Annually</ion-option>
          <ion-option value="Monthly">Monthly</ion-option>
          <ion-option value="Weekly">Weekly</ion-option>
          <ion-option value="Daily">Daily</ion-option>
        </ion-select>   
</ion-item> 

//Section 1
<h2 *ngIf="showDaily">Enter Start Date and Hour:</h2>
        <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate"></ion-datetime>
        <ion-datetime displayFormat="HH:MM A" [(ngModel)]="fromTime"</ion-datetime>

//Section 2
<h2 *ngIf="!showDaily">Enter Start Date:</h2>
            <ion-datetime> displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate" (ngModelChange)="dateChange($event, 'from' )"></ion-datetime>

这在.ts中：

export class RequestPage {
    public showDaily = selectedtype;

constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.type = getSelection;}

type() {
    this.type = getSelection.name;
    if (this.type="Daily") {this.showDaily=true}
    else {this.showDaily=false};
}

Answer 1

改为使用ng-template。您可以将type用于ngIf条件。在这里：

<h2>Type:</h2>
<ion-item>
    <ion-select class="input" [(ngModel)]="type" placeholder="Please select" text-right>
      <ion-option>Annually</ion-option>
      <ion-option>Monthly</ion-option>
      <ion-option>Weekly</ion-option>
      <ion-option>Daily</ion-option>
    </ion-select>   
</ion-item>
<ion-item>
    <div *ngIf="type=='Daily'; else elseBlock">
        <h2>Enter Start Date and Hour:</h2>
        <ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate"></ion-datetime>
        <ion-datetime displayFormat="HH:MM A" [(ngModel)]="fromTime"</ion-datetime>
    </div>
</ion-item>
<ng-template #elseBlock>
    <div>
        <h2>Enter Start Date:</h2>
        <ion-datetime> displayFormat="DD-MM-YYYY" [(ngModel)]="fromDate" (ngModelChange)="dateChange($event, 'from' )"></ion-datetime>
    </div>
</ng-template>

使用ng-if或ng-show

1 个答案: