Question

出于某种原因，我在 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']
        ]};

}

我想显示第一项＆＃39;得分＆＃39;进入选择/选项下拉按钮。

（这些是：[＆＃39;数学＆＃39;，＆＃39;英语＆＃39;，＆＃39;法语＆＃39;，＆＃39; chem＆＃39;，＆＃39; sport＆＃ 39;]）

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

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

我怎么能正确地做到这一点？

Answer 1

您的HTML代码错误。

试试这个。

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

Answer 2

正确的方法是，您应该能够获得选定的值：

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

如 [ngValue] ，如果您想要选择完整数组，可以使用test：['math', 'A', 'A+', 'A-']：

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

或test[0]如果您想要所选数组的第一个值（例如math）：

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

Code example

也不记得将ReactiveFormsModule包含在AppModule中。如果我们想在代码示例中使用 Reactive Forms （formControl / formGroup指令...）

Angular5 [Select + Option]：如何使用复杂数据？

2 个答案: