无法将静态 json 数据绑定到 angular 中的列表 6

Question

Angular 框架中的新内容。现在，我使用 angular@cli.

创建了一个 angular 网络应用程序

以下是我使用的版本：

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

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

"Cannot read property 'name' of undefined". I don't know why it's undefined.

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 文件中显示单个变量值，它工作正常。这段代码中隐藏的问题是什么？

Answer 1

你应该使用 ngFor 和 Angular 6，而不是 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>

示例：Stackblitz Demo

无法将静态 json 数据绑定到 angular 中的列表 6

unable to bind static json data to list in angular 6

angularjs-ng-repeat

ngfor

angular

angular6