在 <li> 上应用 *ngFor 仅显示包含空数据的列表,而在 ngOnInit() 上从 api 获取数据?
applying *ngFor on <li> only shows list with empty data, while fetching data from api on ngOnInit()?
为了显示从 Api 获得的数据,我在 li 标签上应用了 *ngFor 指令。然后,我使用插值来显示 li 标签内的数据。但我没有在列表中获得任何数据。但是,该列表确实显示了与从 API 获得的数据中可用的项目数完全相同的空列表项数。如果我在订阅方法中记录数据,浏览器会记录从 api 获得的数据,但是当我在订阅方法之外记录数据时,浏览器会记录未定义的对象。我附上了我的代码。我将不胜感激任何形式的帮助和建议。
我尝试应用 *ngIf 条件,仅在数据已在 li 的 ngOnInit 父 ul 标签中订阅后才显示列表,如其他帖子之一所建议的那样。
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)
该列表应该按预期显示 console.Console 日志数据中记录的数据。但是在页面中,显示的是空列表。空列表仅更新并显示序列号的值,但分支代码和描述均为空白。
最初设置branches = null;
不要在 ngOnInIt 中执行 API 调用,而是尝试在 ** ngAfterViewInit** - 呈现 DOM 的地方
ngAfterViewInit() {
this.service.getAll()
.subscribe((data: Branch[]) => {
this.branches = [...data];
console.log(this.branches);
});
};
<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>
根据我的理解,我认为可以尝试并更新
为了显示从 Api 获得的数据,我在 li 标签上应用了 *ngFor 指令。然后,我使用插值来显示 li 标签内的数据。但我没有在列表中获得任何数据。但是,该列表确实显示了与从 API 获得的数据中可用的项目数完全相同的空列表项数。如果我在订阅方法中记录数据,浏览器会记录从 api 获得的数据,但是当我在订阅方法之外记录数据时,浏览器会记录未定义的对象。我附上了我的代码。我将不胜感激任何形式的帮助和建议。
我尝试应用 *ngIf 条件,仅在数据已在 li 的 ngOnInit 父 ul 标签中订阅后才显示列表,如其他帖子之一所建议的那样。
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)
该列表应该按预期显示 console.Console 日志数据中记录的数据。但是在页面中,显示的是空列表。空列表仅更新并显示序列号的值,但分支代码和描述均为空白。
最初设置branches = null;
不要在 ngOnInIt 中执行 API 调用,而是尝试在 ** ngAfterViewInit** - 呈现 DOM 的地方
ngAfterViewInit() {
this.service.getAll()
.subscribe((data: Branch[]) => {
this.branches = [...data];
console.log(this.branches);
});
};
<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>
根据我的理解,我认为可以尝试并更新