如何基于日期条件切换mat-option数据源？Angular多模板绑定报错解决

你遇到的报错是因为Angular不允许在同一个DOM元素上同时使用两个带*的结构型指令（比如*ngIf和*ngFor），这类指令都会修改DOM结构，同时使用会导致冲突。

方案一：用ng-container拆分结构型指令 #

把*ngIf放到ng-container上，内部再放置带*ngFor的mat-option，这样两个指令就不会冲突：

<mat-form-field>
  <mat-label>Tally up that score!</mat-label>
  <mat-select [(value)]="selectedTempTime">
    <!-- 日期相同时显示低分值选项 -->
    <ng-container *ngIf="SentDate?.toDateString() === CurrentDate?.toDateString()">
      <mat-option [value]="option.value" *ngFor="let option of tempTime">
        {{ option.viewValue }}
      </mat-option>
    </ng-container>
    <!-- 日期不同时显示高分值选项 -->
    <ng-container *ngIf="SentDate?.toDateString() !== CurrentDate?.toDateString()">
      <mat-option [value]="option.value" *ngFor="let option of tempTimesHighNumber">
        {{ option.viewValue }}
      </mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

方案二：组件内新增计算属性（更简洁） #

在组件类里定义一个计算属性，根据日期判断直接返回对应的数据数组，模板里只需要一次*ngFor：

// 组件类代码
get currentTempOptions(): TempOptions[] {
  // 注意：Date对象直接用===比较的是引用，需转成日期字符串或时间戳确保值比较正确
  const isSameDate = this.SentDate?.toDateString() === this.CurrentDate?.toDateString();
  return isSameDate ? this.tempTime : this.tempTimesHighNumber;
}

模板简化为：

<mat-form-field>
  <mat-label>Tally up that score!</mat-label>
  <mat-select [(value)]="selectedTempTime">
    <mat-option [value]="option.value" *ngFor="let option of currentTempOptions">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

注意事项 #

日期比较时要注意：如果SentDate和CurrentDate是Date对象，直接用===比较的是对象引用，不是实际日期值。建议使用toDateString()（忽略时分秒）或getTime()（转成时间戳）来做值比较，避免因为时间部分差异导致判断错误。

内容的提问来源于stack exchange，提问作者GustaMan9000