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

Question

Angular框架中的一个新功能。现在，我使用angular@cli创建一个Angle Web应用程序。以下是我使用的版本

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

当前，我正在尝试将JSON数据绑定到HTML文件中的列表中。但它无法正常工作，检查了很多例子，仍然无法正常工作 其显示错误“无法读取未定义的属性'名称'”。我不知道为什么它是不确定的。

  HTML Code
<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和li”标签和其他解决方案中添加ng-repeat，但出现相同的错误。     如果试图在HTML文件中显示单个变量值，则可以正常工作。该代码中隐藏的问题是什么？

Answer 1

您应该对angualr6使用 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>

STACKBLITZ DEMO