Angular Как использовать Date Pipe с условием - PullRequest
Новая
       5

Angular Как использовать Date Pipe с условием

0 голосов
/ 17 апреля 2020

Есть ли способ добавить условие в Date Pipe? В настоящее время код будет работать, если есть даты, которые будут отображаться, но если массив пуст, я установил futureDateProjects.viewValue = «Без дат будущего» в моем коде. Однако в текущем коде ниже он не будет отображать «Без будущих дат» в раскрывающемся списке, если нет дат для отображения. 

      <mat-select [(ngModel)]="project?.Attributes.test" name="test">
        <mat-option *ngFor="let futureProject of futureDateProjects" [value]="futureProject.value">
          {{futureProject.viewValue | date:'yyyy-MM-dd'}}
        </mat-option>

Test.Component.ts 

   if (this.futureEffDate.length === 0) {
        this.futureDateProjects.push({ value: this.test, viewValue: 'No Future Dates' });
      }

Ответы [ 3 ]

3 голосов
/ 17 апреля 2020

Я не верю, что есть способ поставить условие на трубу. Я бы использовал * ngIf, как это: 

<select [(ngModel)]="test" name="test">
  <option *ngIf="futureDateProjects.length===0" value="">No Future Date</option>
  <option *ngFor="let futureProject of futureDateProjects" [value]="futureProject.value">
          {{futureProject.viewValue | date: 'yyyy-MM-dd' }}
  </option>
</select>

Если вы будете часто использовать его функциональность, создайте свой собственный канал и оберните это поведение.

0 голосов
/ 17 апреля 2020

Вам не нужно указывать условие в файле TS. Удалите условие длины, когда в массиве нет данных. Просто добавьте этот элемент в ваш html: 

<mat-option *ngIf="!futureDateProjects.length">
  No Future Dates
  </mat-option>

Ваш окончательный выбор будет иметь: 

<mat-select [(ngModel)]="project?.Attributes.test" name="test">
   <mat-option *ngFor="let futureProject of futureDateProjects" 
            [value]="futureProject.value">
          {{futureProject.viewValue | date:'yyyy-MM-dd'}}
   </mat-option>

   <mat-option *ngIf="!futureDateProjects.length">
      No Future Dates
   </mat-option>
</mat-select>

Я надеюсь, что это решит вашу проблему! Do Upvote!

0 голосов
/ 17 апреля 2020

вы можете использовать различные шаблоны внутри опции. Вышлю вам упрощенную версию, но идея следующая: 

<mat-option *ngFor="let futureProject of futureDateProjects" [value]="futureProject.value">
<span *ngIf="futureProject.viewValue !== 'No Future Dates'">{{futureProject.viewValue | date:'yyyy-MM-dd'}}</span>
    <span *ngIf="futureProject.viewValue === 'No Future Dates'">{{futureProject.viewValue}}</span>
            </mat-option>
...