我的选择框没有获得填充Angular4 +

Question

我试图显示没有。选择框中的天数。这是我的component.html

<div class="container">
  <div class="form-group">
    <label for="days"> Select no. of Days</label>
    <select [(ngModel)]="days" id="days" class="form-control">
      <option *ngFor="let method of days" [value]="method.id">{{ method.days }} </option>
    </select>
  </div>
</div>

这是我的component.ts文件。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-addsubscription',
  templateUrl: './addsubscription.component.html',
  styleUrls: ['./addsubscription.component.css']
})
export class AddsubscriptionComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

  days: [
    { id: 1, days: 30 },
    { id: 2, days: 60 }

  ];

}

控制台不会返回任何错误。另外，我在formsmodule注册了app.module.ts我对角度很新，有人可以帮忙吗？

Answer 1

使用days=而不是days:

days= [
    { id: 1, days: 30 },
    { id: 2, days: 60 }
];

<select [(ngModel)]="day" class="form-control">
      <option *ngFor="let method of days" [value]="method.id">{{ method.days }} </option>
</select>

Answer 2

你正在使用ngModel与数组，你应该使用不同的名称，

<select [(ngModel)]="selectedMethod" id="days" class="form-control">
      <option *ngFor="let method of days" [value]="method.id">{{ method.days }} </option>
</select>

你应该分配不声明类型，

 days =  [
    { id: 1, days: 30 },
    { id: 2, days: 60 }    
  ];

DEMO STACKBLITZ

Answer 3

我会给你一个更详细的解决方案。

首先，您应该尽可能使用接口。这将阻止您为变量分配不正确的数据。

其次，你要为变量赋值，所以你应该使用等号，但是，在下面的例子中，我将使用符号：来设置变量的类型，稍后我将使用symbol =来赋值它的价值。

让我们把所有东西放在一起：

import { Component, OnInit } from '@angular/core';

interface Method {
  id: number;
  days: number;
}

@Component({
  selector: 'app-addsubscription',
  templateUrl: './addsubscription.component.html',
  styleUrls: ['./addsubscription.component.css']
})
export class AddsubscriptionComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

  // An array of Method
  days: Method[] = [
    { id: 1, days: 30 },
    { id: 2, days: 60 }
  ];

  mySelection: number;
}

HTML代码将是：

<select [(ngModel)]="mySelection" id="days" class="form-control" (click)="showData()">
    <option *ngFor="let method of days" [value]="method.id">{{ method.days }} </option>
</select>