我有一个方法,应该根据该方法显示以下 HTML。然而它根本不起作用。谁能解释为什么我的 ngIf 被忽略?
<div class="field">
<label for="birthday">Birthday</label>
<mat-form-field class="example-full-width">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" id="birthday" [formControl]="birthdayFormControl" (dateInput)="calculateAge()" (dateChange)="calculateAge()">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker">
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
</div>
<ng-template *ngIf="isApplicantMinor()"> // - not working
<div class="row">
<div class="column">
<div class="field">
<label for="parentBirthday">Birthday</label>
<mat-form-field class="example-full-width">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" id="parentBirthday">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker">
<!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>-->
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="column">
<div class="field">
<label for="birthday">Parent's Email Address</label>
<mat-form-field class="example-full-width">
<mat-label>Email</mat-label>
<input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
placeholder="Ex. [email protected]">
<mat-hint>Enter your parents email!</mat-hint>
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
</div>
</ng-template>
在 TypeScript 中
isApplicantMinor(): boolean {
this.applicantIsMinor = false;
if (this.applicantAge < 18) {
this.applicantIsMinor = true;
}
return this.applicantIsMinor;
}
calculateAge() { // a date on string "22/10/1988
//debugger;
this.applicantIsMinor = false;
var dateString = moment(this.birthdayFormControl.value).format("MM/DD/YYYY") || moment(new Date().toDateString()).format("MM/DD/YYYY");
let age: number = 0;
if (dateString === undefined || dateString?.length === 0) {
dateString = new Date().toDateString();
}
var dateParts = dateString.split("/");
var dateObject = new Date(+dateParts[2], +dateParts[0], +dateParts[1]);
console.log(dateObject);
if (dateString) {
var timeDiff = Math.abs(Date.now() - new Date(dateObject).getTime());
age = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25);
console.log(age);
}
this.applicantAge = age;
if (this.applicantAge < 18) {
this.applicantIsMinor = true;
}
return age;
}
将
ng-template
替换为 ng-container
。原因是*ngIf
内部使用ng-template