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>

这是我的component.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

更新

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,
  },
];

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

2 个答案: