Я хочу способ переписать это с меньшим количеством повторений

Question

Итак, у меня есть два условия с некоторыми изменениями в пользовательском интерфейсе. Есть ли способ переписать его лучше?

<i *ngIf="measures.length > 0">
  <ul *ngFor="let m of measures">
    <io-data-selection-row
      [text]="m.getDisplayName()"
      [id]="m.getId()"
      (deleteIconClicked)="removeSelected($event)"
    ></io-data-selection-row>
  </ul>
</i>
<ul *ngIf="measures.length <= 0">
  <io-data-selection-row
    [strikeThrough]="'strikethrough'"
    [text]="selected"
    [id]="selected"
    (deleteIconClicked)="removeSelected($event)"
  ></io-data-selection-row>
</ul>

Answer 1

Просто используйте *ngIf="measures.length" для! == 0 и *ngIf="!measures.length" для === 0

Answer 2

Можете ли вы добавить вот так и проверить, работает ли оно?

<i>
  <ul *ngFor="let m of measures">
    <io-data-selection-row
      [strikeThrough]="!m && 'strikethrough'"
      [text]="m ? m.getDisplayName() : selected"
      [id]="m ? m.getId() : selected"
      (deleteIconClicked)="removeSelected($event)"
    ></io-data-selection-row>
  </ul>
</i>

Answer 3

Другой подход заключается в том, что когда вы принимаете меры, составляете карту (я полагаю, вы получаете от службы) или используете if, например, например,

this.serviceData.getMeasures.pipe(
    map((res:any[])=>{
       if (!res || res.length<=0)
          return [{text:'selected'}] //<--change to fit in your requeriments
       return res;
    }).subscribe(res=>{
           this.measures=res;
    })

Answer 4

У вас есть несколько способов добиться этого.

1. Используйте ngStyle или ngClass для динамического изменения свойств стиля
2. Если вы хотите модифицировать существующий код, тогда go для ниже.

.

<div *ngIf="measures.length > 0; then thenBlock; else elseBlock"></div>
 <div> 
  <ng-template #thenBlock>
   <ul *ngFor="let m of measures">
    <io-data-selection-row
     [text]="m.getDisplayName()"
     [id]="m.getId()"
      (deleteIconClicked)="removeSelected($event)">
    </io-data-selection-row>
   </ul>
  </ng-template>
 <ng-template #elseBlock>
  <io-data-selection-row
   [strikeThrough]="'strikethrough'"
   [text]="selected"
   [id]="selected"
   (deleteIconClicked)="removeSelected($event)">
  </io-data-selection-row>
 </ng-template>
</div>

Answer 5

Вы можете использовать ngIf-else, но я не думаю, что есть более короткий путь:

<i *ngIf="measures.length; else nolength">
    <ul *ngFor="let m of measures">
        <io-data-selection-row [text]="m.getDisplayName()" [id]="m.getId()"
            (deleteIconClicked)="removeSelected($event)"></io-data-selection-row>
    </ul>
</i>

<ng-template #nolength>
    <ul>
        <io-data-selection-row [strikeThrough]="'strikethrough'" [text]="selected" [id]="selected"
            (deleteIconClicked)="removeSelected($event)"></io-data-selection-row>
    </ul>
</ng-template>