使用optgroup从绑定选择下拉列表中获取所选对象

Question

我正在将一些学校课程+主题模型分组，然后看起来像这样：

到目前为止一切都很好，除了选择的测试类型，例如＆＃39;演示＆＃39;作为字符串返回当前项目，但我想要后面的对象，所以我也可以得到该测试类型的id！

我该怎么做？

使用常见的选择没有 optgroup我对该要求没有任何问题，但是使用分组选择它不起作用！

初始化：

 let groupedTestTypes = Enumerable.from(responseTestTypes).GroupBy(g => g.schoolclassCode, g =>
                g, (key, g) => new TestTypePair(key, Enumerable.from(g).ToArray())).ToArray();
            this.testTypes = groupedTestTypes;

HTML

<select class="form-control" [(ngModel)]="currentTestType">
    <optgroup *ngFor="let testType of testTypes" label="{{testType.key}}">
        <option *ngFor="let item of testType.testTypes">
            {{item.name}}
        </option>
    </optgroup>
</select>

TestType.ts

export default class TestType {

    constructor(obj)
    {
        this.id = obj.id;
        this.name = obj.name;
        this.schoolclassNumber = obj.schoolclassNumber;
        this.subjectName = obj.subjectName
        this.schoolclassCode = this.schoolclassNumber + " " + this.subjectName;
    }

    id: number;
    name: string;
    schoolclassNumber: string;
    subjectName: string;
    schoolclassCode: string;
}

TestTypePair.ts

import TestType from './testtype';
export default class TestTypePair {
    constructor( public key: string, public testTypes: TestType[]) {
    }
}

Answer 1

您可以在选择选项中使用NgValue指令：

<select class="form-control" [(ngModel)]="currentTestType">
    <optgroup *ngFor="let testType of testTypes" label="{{testType.key}}">
        <option *ngFor="let item of testType.testTypes" [ngValue]="item">
            {{item.name}}
        </option>
    </optgroup>
</select>

这是NgValue指令的确切情况 - 当您将对象显示为项目时，您可以使用它来指定选择内容时要返回的值。 （例如名称，id或整个对象）