属性绑定和 ng 指令导致网页未渲染答案

【问题标题】：attribute binding and ng directive cause unrendered webpage属性绑定和 ng 指令导致网页未渲染
【发布时间】：2021-03-23 18:58:42
【问题描述】：

我正在学习 Angular，并按照following tutorial 中的说明和指导进行操作。

我面临的问题是，当我跑步时

ng serve --open

我没有看到 http://localhost:4200/ 页面上显示的项目，但我得到了下面屏幕截图中显示的页面。

我希望看到下面发布的代码所暗示的项目。

请让我知道我的错误在哪里以及如何解决它，以便我可以看到网页上显示的项目列表。

app.component.ts：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class item {
  code: number;
  name: string;

  constructor(code: number, name: string) {
    this.code = code;
    this.name = name;
  }

   items = [
    new item(1, 'Mobile'),
    new item(1, 'Laptop'),
    new item(1, 'Desktop'),
    new item(1, 'Printer')
  ]
}

app.component.html：

<p>item</p>
<ul>
  <li *ngFor = "let d of items">
    <p>{{d.code}}</p>
    <p>{{d.name}}</p>
  </li>
</ul>

图片：

【问题讨论】：

仅供参考，您正在查看的页面是由 CLI 自动生成的。您在 app.component.html 中有一些代码，您将其删除以输入您的代码，对吗？该代码是负责您所看到的页面的代码。我想知道为什么你现在仍然看到它......你保存了吗？无论如何，正如 N.F. 的回答中所指出的那样，您的代码有错误。（PS：检查控制台是否有错误总是一个好主意）

标签： javascript node.js angular typescript

【解决方案1】：

你应该这样做。

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

export class item {
  code: number;
  name: string;

  constructor(code: number, name: string) {
    this.code = code;
    this.name = name;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    new item(1, 'Mobile'),
    new item(1, 'Laptop'),
    new item(1, 'Desktop'),
    new item(1, 'Printer')
  ]

  constructor() {}
}

【讨论】：