Простая труба для обращения элементов массива в ngFor Angular 8+ без изменения индекса массива? - PullRequest
Новая
       10

Простая труба для обращения элементов массива в ngFor Angular 8+ без изменения индекса массива?

0 голосов
/ 26 июня 2019

Как я могу повернуть вспять, не меняя позиций элементов в массиве, следует просто обновить представление с помощью трубы

Я могу использовать array.reverse(), но это помещает первый элемент в последний и так далее, так что индекс элементов изменяется

Вот код стекаблика , который я застрял на 

    import { Component } from '@angular/core';

export interface Order {
  value: string;
  viewValue: string;
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(value: any[], arg: string): any {
    console.log('value', value);
    console.log('args', arg);

    if (arg === 'desc') {
      return value.reverse();
    }

    if (arg === 'asc') {
      return value;
    }
  }

}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  template: `<h4>Basic mat-select</h4>
<mat-form-field>
    <mat-label>Sort Order</mat-label>
    <mat-select value='asc'>
        <mat-option *ngFor="let order of orders" (click)="changeOrder(order.value)" [value]="order.value">
            {{order.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>


<ul>
    <li *ngFor="let item of items| orderBy : sort; index as i">{{i}} -> {{item}}</li>
</ul>`,
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  orders: Order[] = [
    { value: 'asc', viewValue: 'Ascending' },
    { value: 'desc', viewValue: 'Descending' }
  ];

  items: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  sort: string = 'asc';

  changeOrder(val: string) {

    console.log('val', val);

    this.sort = val;
  }

}

Ответы [ 3 ]

0 голосов
/ 01 июля 2019

Вы можете клонировать свой массив, используя let clone = myArray.slice();. Изменение порядка клонов не повлияет на исходный массив. Похоже, это то, что таблица материалов делает .

0 голосов
/ 01 июля 2019

Нашей главной проблемой является изменение вида только в обратном порядке.так что не нужно обновлять логику.только обновлять CSS.

Если элементы отображаются с использованием flex-box CSS, мы можем изменить его, используя свойство flex-direction. 

    flex-direction : row;
    flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse;

, и если элементы отображаются с использованием UL и LI, затем примените ниже CSS для обратного порядка.как показано ниже: 

ul {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
ul > li {
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
0 голосов
/ 26 июня 2019

Вы можете сделать пользовательский канал для сортировки asc или desc и сортировать ваш массив 

##TEMPLATE##
<div *ngFor="let order of Orders | orderBy:'asc'">

##PIPE##
export class OrderByPipe  implements PipeTransform {
transform(orders: any[], field: string): any[] {
    orders.sort((a: any, b: any) => {
    if (a[field] < b[field]) {
     return -1;
    } else if (a[field] > b[field]) {
      return 1;
    } else {
        return 0;
    }
    });
    }
}
...