Angular7 申请*NGON<；李>；从ngOnInit（）上的api获取数据时，仅显示数据为空的列表？

为了显示从Api获得的数据，我在li标记上应用了*ngFor指令。然后，我使用插值来显示li标记内的数据。但我没有得到清单上的任何数据。但是，该列表显示的空列表项的数量与从API获得的数据中可用的项的数量完全相同。如果我将数据记录在subscribe方法浏览器中，则记录从api获得的数据，但当我将数据记录在subscribe方法浏览器之外时，则记录未定义的对象。我已附上我的密码。我将感谢任何形式的帮助和建议

我尝试应用*ngIf条件，只在数据已经在ngOnInit parent ul tag of li中订阅后，才使列表可见，正如其他帖子中建议的那样

branch-list.component.ts

constructor(private service : BranchService) {  }
  ngOnInit() {
    this.service.getAll()
    .subscribe((data: Branch[]) => {
      this.branches = data;
      console.log(this.branches);
    });
    console.log(this.branches);
  };


branch-list.component.html

<ul class="list-group-flush" *ngIf="branches">
    <li *ngFor="let branch of branches; let serialNo = index" class="list-group-item">
      <span hidden>{{branch.Id}}</span>
      {{ serialNo+1 }}. {{ branch.BranchCode }} {{ branch.Description }}
    </li>
  </ul>
<ul>


console of browser

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

undefined   

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, branchCode: "KTM", description: "Kathmandu"}
1: {id: 2, branchCode: "PKH", description: "Pokhara"}
2: {id: 3, branchCode: "HTD", description: "Hetauda"}
3: {id: 4, branchCode: "MHN", description: "Mahendranagar"}
4: {id: 5, branchCode: "JHP", description: "Jhapa"}
5: {id: 6, branchCode: "KTM", description: "Kathmandu"}
6: {id: 7, branchCode: "PTN", description: "PTN"}
length: 7
__proto__: Array(0)

branch-list.component.ts
构造函数（私有服务：BranchService）{}
恩戈尼尼特（）{
this.service.getAll（）
.订阅（（数据：分支机构[]）=>{
this.branchs=数据；
console.log（this.branchs）；
});
console.log（this.branchs）；
};
branch-list.component.html


{{branch.Id}
{{serialNo+1}}。{{branch.BranchCode}{{branch.Description}}



浏览器控制台
Angular正在开发模式下运行。调用enableProdMode（）以启用生产模式。
未定义
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:{id:1，分支代码：“KTM”，说明：“加德满都”}
1:{id:2，分支代码：“PKH”，描述：“博卡拉”}
2:{id:3，分支代码：“HTD”，描述：“Hetauda”}
3:{id:4，分支代码：“MHN”，描述：“Mahendranagar”}
4:{id:5，分支代码：“JHP”，描述：“Jhapa”}
5:{id:6，分支代码：“KTM”，描述：“加德满都”}
6:{id:7，分支代码：“PTN”，描述：“PTN”}
长度：7
__原型：数组（0）

---

该列表应显示控制台中记录的数据。控制台按预期记录数据。但在页面中，会显示空列表。空列表仅更新并显示序列号的值，但branchcode和descriptions均为空。

初始设置Branchs=null

不要在ngOnInIt中执行API调用，而要在**ngAfterViewInit**-呈现DOM的地方尝试

  ngAfterViewInit() {
    this.service.getAll()
    .subscribe((data: Branch[]) => {
      this.branches = [...data];
      console.log(this.branches);
    });
  };

{{serialNo+1}}。{{branch.BranchCode}{{branch.Description}}

---

据我所知，我认为可以尝试更新

谢谢您的建议。我听从了你的建议，但结果还是一样。@RoshanDangol可以共享控制台屏幕输出、dom输出以及网络输出。另外，请使用您的模板尝试此

li代码，并删除不起作用的ulif的ngif。请在plunker中添加您的代码。让我们验证@RoshanDangolprakash r，非常感谢您的帮助。将属性branch.BranchCode和branch.Description从pascalcase更改为camelcase（branch.BranchCode）解决了此问题。在分支模型中，我使用了pascal case来命名属性，但浏览器将它们记录在case中。所以，我试着改变情况，结果成功了。您能提供一些建议或约定来避免这种情况吗？@RoshanDangol问题来自服务器端。您需要从服务器端序列化对象并将其传递给客户端。这个问题将得到解决。执行此操作的正确位置是服务器端。

<ul class="list-group-flush" *ngIf="branches && branches.length">
    <li *ngFor="let branch of branches; let serialNo = index" class="list-group-item">
      {{ serialNo+1 }}. {{ branch.BranchCode }} {{ branch.Description }}
    </li>
  </ul>
<ul>