为什么我的 ng-template 和 ngIf 中的代码无法正常工作

Question

我有一个方法，应该根据该方法显示以下 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;
}

Answer 1

将

ng-template

替换为

ng-container

。原因是

*ngIf

内部使用

ng-template