无法将静态 json 数据绑定到角度 6 中的列表答案

【问题标题】：unable to bind static json data to list in angular 6无法将静态 json 数据绑定到角度 6 中的列表
【发布时间】：2019-08-07 08:53:26
【问题描述】：

我是 Angular 框架的新手。现在我使用 angular@cli 创建一个 Angular Web 应用程序。

以下是我使用的版本：

Angular CLI: 6.1.3Node: 10.15.3OS: win32 x64Angular: 6.1.2

目前我正在尝试将JSON 数据绑定到HTML 文件中的列表中。但它不会工作，检查了很多例子，仍然不工作它显示一个错误：

“无法读取未定义的属性‘名称’”。我不知道为什么它是未定义的。

HTML 代码：

<div>
  <ul class="list-group list-group-flush" ng-repeat="list in SERVICE_LIST">
    <li class="list-group-item">
      <a href="">{{list.name}}</a>
      <span class="active-circle">&nbsp;</span>
    </li>
  </ul>
</div>

组件代码：

@Component({
  selector: 'app-main-home',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  constructor() { }
  SERVICE_LIST = [
    {"id":1, "name": "Service 1", "port": "8090", "ip": "10.0..4", "status": "InActive" },
    { "id":2,"name": "Service 2", "port": "8090", "ip": "10.0..4", "status": "InActive" },
    {"id":3, "name": "Service 3", "port": "8090", "ip": "10.0..4", "status": "InActive" }
  ]
  ngOnInit() {
  }
}

我花了很多时间试图找出我做错了什么却不知道。

我尝试在 div,ul and li 标签和堆栈中的其他解决方案中添加 ng-repeat，但得到相同的错误。如果我试图在 HTML 文件中显示单个变量值，它的工作正常。这段代码中隐藏的问题是什么？

【问题讨论】：

标签： angular angular6 angularjs-ng-repeat ngfor

【解决方案1】：

您应该在 Angular 6 中使用 ngFor，而不是 ng-repeat：

<ul class="list-group list-group-flush" *ngFor="let list of SERVICE_LIST">
  <li class="list-group-item">
    <a href="">{{list?.name}}</a>
    <span class="active-circle">&nbsp;</span>
  </li>
</ul>

Ecample：Stackblitz Demo

【讨论】：

我已经尝试过 ng-for 而不是 ng-irepeat 它不起作用。
请查看演示
现在工作正常。非常感谢您的即时重播