Как я могу установить различные параметры из TypeScript в HTML, используя Angular CLI?

Question

Мне нужно установить разные классы в зависимости от кнопки.Пример:

delete -> class = 'danger';

edit -> class = 'primary' (установлено по умолчанию)

Это мой HTML:

<div class="container">
  <table class="table">
    <tr>
      <th *ngFor="let col of columns" (click)="sortTable(col)">{{col}}</th>
      <th>Actions</th>
    </tr>
    <tr *ngFor="let user of users | paginate: {itemsPerPage: 5,
                                               currentPage: page,
                                               totalItems: users.length } ; let i = index">
      <td *ngFor="let col of columns">{{user[col]}}</td>
      <td>
        <button class="btn btn-{{class}}" *ngFor="let act of actions" (click)="actionFunc(act,i)">{{act}}</button>
        //THE RESULT MUST BE LIKE THIS
        <!--<button class="btn btn-danger">Delete</button>-->
        <!--<button class="btn btn-primary"> Edit</button>-->
      </td>
    </tr>
  </table>
</div>

<div>
  <pagination-controls (pageChange)="page = $event"></pagination-controls>
</div>

Это мой component.ts:

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];
  @Input()
  actions: string[];

  @Input()
  class = 'primary';

  direction = false;
  page: any;

  constructor() {
  }

  sortTable(param) {
    /*...*/
  }

  actionFunc(i, index) {
    if (i === 'deleteUser') {
      if (confirm('Are you sure you want to delete this item?') === true) {
        this.users.splice(index, 1);
      }
    }
    if (i === 'editUser') {
      /*...*/
    }
  }

  ngOnInit(): void {
    /*if (this.actions ==='deleteUser') {
      this.class = 'danger';*/ SOMETHING LIKE THIS
    }
  }

}

Я не уверен, нужно ли мне вставлять логику внутри "onInit ()", поэтому, если у вас есть какие-либо предложения, я был бы признателен.

Answer 1

ОБНОВЛЕНИЕ HTML

<button [ngClass]="getClassCondition(act)" *ngFor="let act of actions" (click)="actionFunc(act,i)">{{act}}</button>

COMPONENT.TS

 getClassCondition(act) {
    return act === 'deleteUser'  ? this.class = 'btn btn-danger' : 'btn btn-primary' ;
  }

Answer 2

Добавить перечисление для ваших Action s:

enum Action {
    'Delete' = 'delete',
    'Edit' = 'primary',
    // etc...
}

Добавить функцию для получения класса из enum:

getActionClass(action: string): string {
    return Action[action];
} 

Получить класс из шаблона:

<button class="btn btn-{{getActionClass(act)}}"
        *ngFor="let act of actions"
        (click)="actionFunc(act,i)">{{act}}
</button>

Это простой пример.Имейте в виду, что вызовы функций в шаблоне - не самые умные идеи, так как они вызываются при каждом запуске обнаружения изменений.

Другая идея заключается в использовании setter для actions Input:

    _actions: string[];
    @Input('actions')
    set actions(actions) {
        this._actions = actions;
        this._actionsWithClasses = this._actions.map(action => {
            return { action: action, class: Action[action] };
        });
    }
    get actions() {
        return this._actions;
    }

    _actionsWithClasses: { action: string; class: string }[];

... и затем используйте actionsWithClasses в шаблоне вместо actions.