select/ngFor中的angular5分组输出

我有一个像这样的数据集

[{id: "1", type: "Animal", name: "German Sheperd", family: "Canine" },
{id: "2", type: "Animal", name: "Poodle", family: "Canine" },
{id: "3", type: "Animal", name: "Pug", family: "Canine" },
{id: "4", type: "Animal", name: "Callico", family: "Feline" },
{id: "5", type: "Animal", name: "Siamese", family: "Feline" }]

我想使用HTML选项组对它们进行分组

<select>
    <optgroup label="Canine">
        <option value="1">German Sheperd</option>
        <option value="2">Poodle</option>
        <option value="3">Pug</option>
    </optgroup>
    <optgroup label="Feline">
        <option value="4">Callico</option>
        <option value="5">Siamese</option>
    </optgroup>
</select>

德国谢泼德
贵宾犬
帕格
卡利科
暹罗人

我知道这是不对的，但是像这样的事情

<select class="form-control input-sm "  [class.state-error]="showError('talent')" name="talent" formControlName="talent" >
                <optgroup *ngFor="let family of animals" label= {{family.family}} >

                    <option *ngFor="let thing of things" value= {{thing.id}}>
                        {{thing.name}}
                    </option>

                </optgroup>
            </select>

{{thing.name}

---

在Angular5中我将如何执行此操作？

以下是一个工作示例：

组成部分：

export class AppComponent  {
  families: string[]; // it's cleaner to prepare your data in the model and then pass it to the template
  animals = [{id: "1", type: "Animal", name: "German Sheperd", family: "Canine" },
{id: "2", type: "Animal", name: "Poodle", family: "Canine" },
{id: "3", type: "Animal", name: "Pug", family: "Canine" },
{id: "4", type: "Animal", name: "Callico", family: "Feline" },
{id: "5", type: "Animal", name: "Siamese", family: "Feline" }];

  ngOnInit() {
    this.families = Array.from(new Set(this.animals.map(({family}) => family))); // get unique families
  }
}

模板：

<select class="form-control input-sm">
  <optgroup *ngFor="let family of families" 
            label= {{family}} >
      <ng-container *ngFor="let thing of animals" >
        <option *ngIf="thing.family === family" value={{thing.id}}>
            {{thing.name}}
        </option>
      </ng-container> 
  </optgroup>
</select>

{{thing.name}

你可以在这里玩：

---

*ngFor=“让事情发生”

，什么是

事情

？完美-谢谢！很高兴我能帮忙！祝你好运