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吗？

我的意思是，我可以在组件中创建一个函数，该函数遍历选项列表，并将这些对象添加到新列表中以显示。但这给出了未定义的错误，而在设置Machine之前未呈现组件。 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

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

对于排序本身

{{1}}

如何对Angular列表中的项目进行排序？

3 个答案: