在使用ngFor从数组进行插值时,在DOM中获取NaN

Question

我使用Angular 2 + TypeScript,并在选项标签中获得NaN

app.component.ts:

export class AppComponent {
  rooms = {
    type: [
      'Study room',
      'Hall',
      'Sports hall',
      'department room',
      'Service room',
      'Restroom']
  };

app.component.html:

  <select placeholder="Select an option">
    <option *ngFor="let room-type of rooms.type">{{room-type}}</option>
  </select>

我无法弄清楚发生了什么,因为我无法调试插值和所有绑定操作,我只是不知道如何,而且Google-Bing没有帮助!

我在Windows 10上使用Visual Studio Code.

这就是它的样子:

我认为它是TypeScript导致这个问题,因为预计某些东西会得到数字变量,但是接收不是一个数字......

Answer 1

不要-在变量名内使用.它在JS/TS中是不允许的,所以它也不允许用于模板化.它会尝试减去并导致NaN(不是数字):

<option *ngFor="let roomType of rooms.type">{{roomType}}</option>