如何创建一个动作数组并在我的Angular组件中实现它们？

Question

我必须使用一系列动作（底部页面）修改以下代码。

我看到很多网站，我找不到可用于我的代码的东西。

我将不得不改变我的html，我的tableService，我的component.ts以及我的actionConfiguration。

目前这是我的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 [ngClass]="getClassCondition(act)" *ngFor="let act of actions" (click)="actionFunc(act,i)">{{act}}</button>
      </td>
    </tr>
  </table>
</div>

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

这是我的组件.ts：

@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;

  direction = false;
  page: any;

  constructor() {
  }

  sortTable(param) {
    /*done*/
  }

  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') {
      /*...*/
    }
  }

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

  ngOnInit(): void {
  }

}

这是我的tableService.ts

import { USERS } from './mock-data';

@Injectable()
export class TableService {

  constructor() { }

  static getUsers(): Observable<any[]> {
    return Observable.of(USERS).delay(100);
  }

  static getColumns(): string[] {
    return ['id', 'firstName', 'lastName', 'age'];
  }

  static getActions(): string[] {
    return ['deleteUser', 'editUser'];
  }

}

这是新的任务，我必须创建一个动作数组，这样我就可以在不同的组件中使用它，但我不知道如何做到这一点。我必须从这样的事情开始，这只是一个例子（不完整，因为我不知道要插入什么）：

actionConfig.ts

export const ACTIONS = [
  {
    label: 'Remove',
    actionType: 'deleteUser',
  },
  {
    label: 'Edit',
    actionType: 'editUser',
  },
];

Answer 1

Enum的样本和一个表格，用于显示迭代它们的数据：StackBlitz

您也可以阅读typescript-enums-explained

基本上，TypeScript枚举被编译为如下所示的反向查找。这就是为什么我在构造函数中添加了foreach循环并创建了另一个列表。

export enum Fruits {
    APPLE = 'Apple',
    MANGO = 'Mango',
    BANANA = 'Banana',
}

被编译为

var Fruit;
(function (Fruit) {
    Fruit[Fruit["APPLE"] = 'Apple'] = "APPLE";
    Fruit[Fruit["MANGO"] = 'Mango'] = "MANGO";
    Fruit[Fruit["BANANA"] = 'Banana'] = "BANANA";
})(Fruit || (Fruit = {}));

Answer 2

UPDATE

HTML

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

COMPONENTS.TS

actionFunc(action, element: any) {
    if (action.actionType === 'DELETE') {
      if (confirm('Are you sure you want to delete this item?') === true) {
        /*...*/
      }
    }
    if (action.actionType === 'GO_TO') {
     /*...*/
    }
  }

actionsConfig.ts

export const ACTIONS = [
  {
    label: 'Delete',
    actionType: 'DELETE',
    deleteApi: 'api/USERS'
  },
  {
    label: 'Edit',
    actionType: 'GO_TO',
    getUrl: row => '/detail/' + row.id,
  },
];