如何在Angular的列表中對項目進行排序？

Question

我正在創建一個選項選擇器，您是否能夠為某台機器選擇選項。 使用對象設計查看圖像：

賓語：

碼：

export class Machine{
    Id: string;
    MachineGroup: MachineGroup;
    Price: number;
    Description: string;
    Image: Image;
    Weight: number;
    Power: number;
    Speed: number;
    Name: string;
    BomId: number;
    Options: Option[];
}

export class Option{
    Id: number;
    Price: number;
    OptionGroup: OptionGroup;
    Description: string;
}

export class OptionGroup{
    Id: number;
    Image: Image;
    Name: string;
}

選項需要在他們的OptionGroup下排序，是否有某種我可以在Angular中使用的LINQ？

我的意思是我可以在組件中創建一個循環通過選項列表的函數，並將這些對象添加到要顯示的新列表中。 但這會產生未定義的錯誤，而在設置機器之前不會渲染組件。 console.log打印了它應該是的對象。 錯誤是字面意思：“這是未定義的”，所以我期待OptionGroup數組。

如果設置了機器，則渲染：

<div *ngIf="machine">
    <app-option-selector [inputMachine]="machine"></app-option-selector>
</div>

具有功能的組件：

export class OptionSelectorComponent implements OnInit {

  @Input() inputMachine: Machine;
  options: Option[];
  optionGroups: OptionGroup[];

  constructor() { }

  ngOnInit() {
    this.options = this.inputMachine.Options;
    this.setOptionGroups();

  }

  setOptionGroups(){
    this.options.forEach(function(e){
      console.log(e.OptionGroup);
      this.optionGroups.push(new OptionGroup())
    })
  }
}

那么是否有一種Angular方式來創建這樣的排序？ 不像我試圖做的那樣容易出錯？

Answer 1

您可以按屬性分組：

arrayToObject(array, keyField) {
    return array.reduce((obj, item) => {
        obj[item[keyField]] = item;
        return obj;
    }, {});
}

用法：

const groups = this.arrayToObject(this.options, 'OptionGroup');
       this.optionGroups = Object.values(groups); 

Answer 2

 ngOnInit() {
    this.options = this.inputMachine.Options;
    this.optionGroups = this.setOptionGroups();
  }

setOptionGroups() {
  const optionsCopy = [...options]; // don't mutate options array
  this.optionsCopy.sort((a, b) => (
    // your sort logic
    a.Id - b.Id // example : order by id
  ));
  return optionsCopy.map(option => new OptionGroup() {
    id: option.Id
  });
}

Answer 3

你可以使用lodash

    const machines: Machine[] = [/*...*/];
    const options: Option[][] = machines.map(machine => machine.options);
    const flatOptions: Option[] = [].concat(...options); // could also use lodash flatten
    const optionGroups: OptionGroup[] = flatOptions.map(option => option.optionGroup); 
    const uniqueOptionGroups: OptionGroup[] = _.uniq(optionGroups); // import * as _ from 'lodash'

而對於排序本身

machines.forEach(machine =>
      machine.options.sort((option1, option2) =>
        // your compare
      );
    );