Html Angular5[选择+；选项]：如何使用复杂数据？

由于某些原因，我在app.component.ts文件中有一个复杂的数据：

export class AppComponentimplements OnInit {

    tests = {
        'name': 'Bob',
        'grade': '5th',
        'score': [
            ['math',    'A',   'A+',  'A-'],
            ['english', 'B',   'B-',  'A'],
            ['french',  'A',   'A+',  'A'],
            ['chem',    'C',   'C',   'C'],
            ['sport',   'B',   'B',   'B']
        ]};

}

我想在一个选择/选项下拉按钮中显示“分数”下的第一个项目

（这些是：[“数学”、“英语”、“法语”、“化学”、“体育]）

在app.component.html文件中，以下代码是我多次尝试的代码之一。但可悲的是，它不起作用

<select>
    <option *ngFor="let test of tests" [ngValue]="test.score[0]">
        {{test.score[0]}}
    </option>
</select>

{{test.score[0]}

---

我怎样才能正确地做呢

您的HTML代码错误

试试这个

<select>
  <option *ngFor="let score of tests.score" [ngValue]="tests.score[0]" >
      {{score[0]}}
  </option>
</select>

{{score[0]}

您的HTML代码错误

试试这个

<select>
  <option *ngFor="let score of tests.score" [ngValue]="tests.score[0]" >
      {{score[0]}}
  </option>
</select>

{{score[0]}

正确的方式，您应该能够获得所选值：

<select id='subjects' [formControl]="selectedSubject">
    <option *ngFor="let test of tests.score" [ngValue]="test[0]">
        {{test[0]}}
    </option>
</select>

或

test[0]

如果需要选定数组的第一个值（例如

math

）：

{{test[0]}

---

另外，不要记得将

反应表单模块

包含到AppModule中。如果我们想使用反应式表单（formControl/formGroup指令…），如代码示例中所示

正确的方式，您应该能够获得所选值：

<select id='subjects' [formControl]="selectedSubject">
    <option *ngFor="let test of tests.score" [ngValue]="test[0]">
        {{test[0]}}
    </option>
</select>

或

test[0]

如果需要选定数组的第一个值（例如

math

）：

{{test[0]}

另外，不要记得将

反应表单模块

包含到AppModule中。如果我们想使用反应式表单（formControl/formGroup指令…），如代码示例中所示