Как создать массив действий и реализовать их в моем угловом компоненте? - PullRequest
Новая
       5

Как создать массив действий и реализовать их в моем угловом компоненте?

0 голосов
/ 04 марта 2019

Мне нужно изменить следующий код с помощью массива действий (нижняя страница).

Я видел много сайтов, но не смог найти что-то, что можно использовать для моего кода.

Мне придется изменить мой 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',
  },
];

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

ОБНОВЛЕНИЕ

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,
  },
];
0 голосов
/ 05 марта 2019

Образец Enum и таблица для отображения данных об их итерации: StackBlitz

Возможно, вы также захотите прочитать объяснение typeScript-enums

По сути, перечисления 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 = {}));
...