typescript 根据 *ngIf中的条件更改mat-option的值

wmomyfyw  于 2022-12-05  发布在  TypeScript
关注(0)|答案(1)|浏览(145)

当涉及到我的mat-option时,我有两个值选项

tempTime: TempOptions[] = [
    { value: 100, viewValue: '100 points' },
    { value: 200, viewValue: '200 points' }
  ];

tempTimesHighNumber: TempOptions[] = [
    { value: 1000, viewValue: '1000 points' },
    { value: 2000, viewValue: '2000 points' }
  ];

我想在我的html中设置一个基于两个变量的条件:
public SentDate;
public CurrentDate;
我从日期选择器获取这些值。我希望的结果是,如果日期相同,则在mat-options中显示tempTime,否则显示temptimesHighNumber
以下是我尝试过的方法:

<mat-form-field>
      <mat-label>Tally up that score!</mat-label>
      <mat-select
        [(value)]="selectedTempTime"
      >
        <ng-container>
          <mat-option
            *ngIf="checkConditionSentDate === checkConditionCurrentDate"
            [value]="option.value"
            *ngFor="let option of tempTimes"
            >{{ option.viewValue }}</mat-option
          >
          <mat-option
            [value]="option.value"
            *ngFor="let option of tempTimesIfNotTodaysDate"
            >{{ option.viewValue }}</mat-option
          >
        </ng-container>
      </mat-select>
    </mat-form-field>

下面是我遇到的错误:Can't have multiple template bindings on one element. Use only one attribute prefixed with * ("heckConditionSentDate === checkConditionCurrentDate"使用*ngIf的正确方法是什么?或者我的方法不对?

cngwdvgl

cngwdvgl1#

您可以使用ng-container Package 每个mat-option,并将 *ngIf放在ngContainer上,如下所示:

<ng-container *ngIf="checkConditionSentDate === checkConditionCurrentDate">
      <mat-option [value]="option.value"
                  *ngFor="let option of tempTimes">{{ option.viewValue }}
      </mat-option>
    </ng-container>
    <ng-container *ngIf="otherCondition">
      <mat-option
              [value]="option.value"
              *ngFor="let option of tempTimesIfNotTodaysDate"
      >{{ option.viewValue }}</mat-option
      >
    </ng-container>

相关问题