尝试使用 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 代码

看起来是这样的：

我认为是 TypeScript 导致了这个问题，因为某些东西应该得到数字变量，但收到的不是数字...

Answer 1

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

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

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

Getting NaN in DOM when trying interpolation from array with ngFor

javascript

nan

typescript

visual-studio-code

angular