尝试使用 ngFor 从数组进行插值时在 DOM 中获取 NaN答案

【问题标题】：Getting NaN in DOM when trying interpolation from array with ngFor尝试使用 ngFor 从数组进行插值时在 DOM 中获取 NaN
【发布时间】：2017-04-20 21:16:00
【问题描述】：

我使用 Angular 2 + TypeScript，我在 option 标记中得到 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 导致了这个问题，因为某些东西应该会得到数字变量，但接收到的不是数字...

【问题讨论】：

在变量名中使用符号'-'似乎是个坏主意

标签： javascript angular typescript visual-studio-code nan

【解决方案1】：

不要在变量名中使用-。在 JS/TS 中是不允许的，所以在模板中也是不允许的。它将尝试减去并导致NaN（不是数字）：

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

【讨论】：

@PierreDuc 感谢您解决问题。你也能回答吗？..如何调试绑定（2路，1路进出，插值）？只是好奇。