Для отображения фишек или кнопок на основе значения свойства JSON в угловых

Question

Мой JSON файл выглядит так: customers.json

[
    {
        "id": "1",
        "name": "Customer One",
        "status": "Open"
    },
    {
        "id": "2",
        "name": "Customer Two",
        "status": "Active"
    },
    {
        "id": "3",
        "name": "Customer Three",
        "status": "Open"
    },
    {
        "id": "4",
        "name": "Customer Four",
        "status": "Closed"
    },
    {
        "id": "5",
        "name": "Customer Five",
        "status": "Active"
    }
]

Как показано в приведенном выше коде, есть свойство с именем status, основанное на значении этого свойства (статуса) в шаблоне, который я хочу отобразить:

• Необходимо использовать chip для Открыть Статус.
• Зеленая кнопка с текстом для Актив статус.

• Красная кнопка с текстом для Закрыт статус.

  ПРИМЕЧАНИЕ: И текст может быть чем угодно, кроме значения свойства (staus) :

Ссылка PIc

DEMO

Answer 1

Попробуйте это:

    <div *ngFor="let customer of customers">
        <div>{{customer.name}}</div>
        <mat-chip-list *ngIf="customer.status ==='Open';else elseBlock">
          <mat-chip class="open">This customer service is {{customer.status}}</mat-chip>
        </mat-chip-list>
        <ng-template #elseBlock>
          <button [ngClass]="customer.status ==='Active'? 'active': 'close'">This customer service is {{customer.status}}</button>
        </ng-template>
    </div>

В css:

.active {
  background-color:green;
  color:white
}

.close {
  background-color:red;
  color:white
}
.open {
  background-color:gray;
  color:white
}

Answer 2

У нас была такая же проблема.Мы использовали следующую логику

<ng-container *ngFor="let btn of actions">
   <ng-container *ngIf="btn.action === 'APPROVE'">
      <button *ngIf="!getRunCreditEngineCondition()" [class]="btn.buttonClass" (click)="clickAction(btn.action)" style="white-space: normal;">{{btn.label}}</button>
    </ng-container>
    <ng-container *ngIf="btn.action === 'RUNCREDITENGINE'">
       <button *ngIf="getRunCreditEngineCondition()" [class]="btn.buttonClass " (click)="clickAction(btn.action)" style="white-space:normal;">{{btn.label}}</button>
    </ng-container>
    <ng-container *ngIf="btn.action !== 'RUNCREDITENGINE' && btn.action !== 'APPROVE'">
       <button [class]="btn.buttonClass" (click)="clickAction(btn.action)" style="white-space: normal;">{{btn.label}}</button>
    </ng-container>
</ng-container>