选择ng-model ng-options不起作用

时间:2018-03-20 12:49:43

标签: angular select drop-down-menu ng-options angularjs-ng-options

你可以帮我解决我的问题吗?我完全不明白为什么它不起作用。

我想从数据库

动态生成Level []中的select
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

字典item.component.html:

<div class="pull-right level">
    <select id="levelSelect" ng-model="levelModel" ng-options="level as level.level for level in levels" (click)="stopPropagation($event)">
    </select>
  </div>

字典item.component.ts:

    @Component({
      selector: 'app-dictionary-item',
      templateUrl: './dictionary-item.component.html',
      styleUrls: ['./dictionary-item.component.css']
    })
    export class DictionaryItemComponent implements OnInit {
      @Input() dictionaryItem: DictionaryItem;
      levels: Level[] = [];

      constructor(private dictionaryService: DictionaryService) { }

      ngOnInit() {
        this.levels = this.dictionaryService.getLevels();
        console.log(this.levels);
/*
from Chrome console:
(5) [{…}, {…}, {…}, {…}, {…}]
0
:
{id: 1, level: 1}
1
:
{id: 2, level: 2}
2
:
{id: 3, level: 3}
3
:
{id: 4, level: 4}
4
:
{id: 5, level: 5}
length
:
5
__proto__
:
Array(0)
*/
      }
    }

this.dictionaryService.getLevels()返回Level []:

其中等级:

export class Level {
    public id: number;
    public level: number;

    constructor(id: number, level: number) { }
}

为什么Angular会在页面上生成空白选择列表?没有任何价值观?

我甚至试图设置组件:

ngOnInit() {
    this.levels = [new Level(1,1), new Level(2,2), new Level(3,3)];
  }

但网站上没有任何代数。什么都没有。

提前谢谢! Mateusz

1 个答案:

答案 0 :(得分:4)

它不起作用,因为你没有使用angularJS。

<select [(ngModel)]="levelModel" (click)="stopPropagation($event)">
  <option *ngFor="let level of levels" [value]="level">{{ level }}</option>
</select>