使用单个 ngFor 循环在 select 标签中显示两个不同的 optgroup for angular 4

Question

我有一个虚拟对象数组，如下所示：

this.historyOfWords = [
      {
        'property': 'property1',
        'type': 'dataprop',
        'value': 'value1'

      },
      {
        'property': 'Ref1',
        'type': 'objprop',
        'value': 'Prop of Ref1'
      }
    ];

我希望将上述信息分类为 <optgroup> 用于 <select> 标签

我目前的实现如下：

<select size="10">
      <optgroup label="Properties"> <!-- all type of data that is not `objprop`-->
        <option *ngFor="let eachVal of historyOfWords">
          <div *ngIf="eachVal.type!='objprop'"> <!-- test type here -->
          {{eachVal.property}}</div>
        </option>
      </optgroup>
      <optgroup label="References to Properties">
        <option *ngFor="let eachVal of historyOfWords"> <!-- need to run the  loop again-->
          <div *ngIf="eachVal.type==='objprop'">{{eachVal.property}}</div>
        </option>
      </optgroup>
    </select>

我试过angular中的逻辑if else类似

<select size="10">
      <optgroup label="Properties"> <!-- all type of data that is not `objprop`-->
        <option *ngFor="let eachVal of historyOfWords">
          <div *ngIf="eachVal.type=='dataprop'; else ref;"> <!-- test type here -->
          {{eachVal.property}}</div>
        </option>
      </optgroup>
      <optgroup label="References to Properties">
        <ng-template #ref> <-- ELSE show this -->
        <option *ngFor="let eachVal of historyOfWords"> <!-- need to run the  loop again-->
          <div>{{eachVal.property}}</div> <!-- need to put some logic here again -->
        </option>
      </optgroup>
    </select>

问题是 eachVal 超出了第一个 optgroup 的范围，因此不可用，所以我需要重新循环。

在 optgroup 下显示两个不同值而不循环更多次的最佳方法是什么。

Answer 1

提前过滤数据。在组件 class 中而不是在模板中保留尽可能多的逻辑总是一个好主意。

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

@Component({
  selector: 'my-app',
  template: `
  <select>
      <optgroup label="Properties"> 
        <option *ngFor="let eachVal of notObjProp">
          <div> {{eachVal.property}}</div>
        </option>
      </optgroup>
      <optgroup label="References to Properties">
        <option *ngFor="let eachVal of objProp"> 
          <div>{{eachVal.property}}</div>
        </option>
      </optgroup>
    </select>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    {
      'property': 'property1',
      'type': 'dataprop',
      'value': 'value1'

    },
    {
      'property': 'Ref1',
      'type': 'objprop',
      'value': 'Prop of Ref1'
    }
  ];

  objProp = this.data.filter(({ type }) => type === 'objprop');
  notObjProp = this.data.filter(({ type }) => type !== 'objprop');
}

Live demo

使用单个 ngFor 循环在 select 标签中显示两个不同的 optgroup for angular 4

use single ngFor loop to display two distinct optgroup in select tag for angular 4

html

optgroup

angular