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

您将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 2

使用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 3

我将为您提供更详细的解决方案。

首先，应尽可能使用接口。这将防止您将错误的数据分配给变量。

第二，您正在为变量分配一个值，因此您应该使用等号，但是，在下面的示例中，我将使用符号：设置变量的类型，稍后再使用该符号=分配其值。

我们将所有内容放在一起：

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>

我的选择框未填充Angular4 +

3 个答案: