Question

我有3个输入字段，[(ngModel)]到3个变量。

然后我有一个隐藏按钮，只有当所有3个变量都有值时才显示，使用*ngIf。看看代码：

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Fecha" [(ngModel)]="matchDay">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
        <input matInput placeholder="Hora" type="number" min='00' max='23' [(ngModel)]="matchHours">
</mat-form-field>
<mat-form-field>
        <input matInput placeholder="Minutos" type="number" min='00' max='59' [(ngModel)]="matchMinutes">
</mat-form-field>
<div class="button-row" *ngIf="matchHours && matchDay && matchMinutes">
        <button mat-raised-button color="accent" (click)="setMatchDate()">Set Date</button>
</div>

问题在于，如果＆＃34; matchHours＆＃34;或者＆＃34; matchMinutes＆＃34;有0或00值，＆＃34;设置日期＆＃34;按钮不会显示为未满足*ngIf条件。

任何想法可能会发生在这里？

这是ts代码：

export class CreateMatchComponent implements OnInit {

  matchDay: Date;
  matchHours: number;
  matchMinutes: number;

setMatchDate() {
    let parsedDate = this.matchDay.toISOString().split('T');
    this.match.matchDate = this.createFormattedMatchDate(parsedDate[0], this.matchHours, this.matchMinutes);
    console.log(this.match.matchDate);
  }

  createFormattedMatchDate(parsedDate: string, hour: number, minute: number) {
    minute = pad(minute);
    hour = pad(hour);
    function pad(n) {
      return (n < 10 && n >= 0) ? ("0" + n) : n;
    }
    let formattedDate = parsedDate + "T" + (hour + 3) + ":" + minute + ":00";
    return formattedDate; 
  } 
}

Answer 1

因为0在javascript中被认为是假的，所以* ngIf将其视为false并且不显示您的按钮。您可以使用字符串类型值＆＃39; 0＆＃39; 0所以它不会被认为是假的。

有关falsy的更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Glossary/Falsy

当变量设置为0时，为什么* ngIf不起作用？

1 个答案: