[英]How to use *ngFor to show rows of data in Angular
我正在尝试使用 * ngFor 在添加新类别时创建新的“行”。
问题是在运行程序时,我没有收到任何错误,但也没有得到预期的结果。 我尝试添加一些东西,但 * ngFor 中的所有内容都没有“运行”......有人可以帮助我吗?
GetCategory() {
var self = this;
this.Global.refreshToken().subscribe(function (result) {
self.uploadService.getCategory().then(function (resultado) {
if (resultado) {
// self.category = resultado;
var categories = JSON.parse(resultado);
// console.log(categories);
} else {
}
}).catch();
});
}
<div class="bodyPermCardDam">
<div *ngFor="let category of categories; let i = index">
<ng-template>
<div class="categoryChoosedName catParm{{category.ID}}" (click)="SelectCategoryPerm(category.ID,1)">
<svg class="folder" id="folder{{category.ID}}" xmlns="http://www.w3.org/2000/svg" width="24" height="19.2" viewBox="0 0 24 19.2">
<style type="text/css">
.folder:hover .stSpecial,
.folder:active .stSpecial {
fill: #4981C2 !important;
}
.stSpecial {
transition: all 0.3s ease 0s;
}
</style>
<g transform="translate(-32 -92)">
<g transform="translate(28 84)">
<path class="stSpecial" d="M13.6,8H6.4a2.389,2.389,0,0,0-2.388,2.4L4,24.8a2.4,2.4,0,0,0,2.4,2.4H25.6A2.4,2.4,0,0,0,28,24.8v-12a2.4,2.4,0,0,0-2.4-2.4H16Z" fill="#caced5" />
</g>
</g>
</svg> {{category.Name}}
</div>
</ng-template>
</div>
</div>
您需要在组件中声明一个公共类别列表:
public categories : any[];
GetCategory() {
var self = this;
this.Global.refreshToken().subscribe(function (result) {
self.uploadService.getCategory().then(function (resultado) {
if (resultado) {
this.categories = JSON.parse(resultado);
} else {
}
}).catch();
});
}
并在视图中通过添加 *ngIf 来等待数据:
<div class="bodyPermCardDam" *ngIf="categories">
<div *ngFor="let category of categories; let i = index">
...
</div>
</div>
删除ng-template
并且您的代码应该在*ngFor
中显示结果。 这就是<ng-template>
工作原理。
你需要ng-container
来渲染ng-template
。 看一下这个
<div class="bodyPermCardDam">
<div *ngFor="let category of categories; let i = index">
<div class="categoryChoosedName catParm{{category.ID}}" (click)="SelectCategoryPerm(category.ID,1)">
<svg class="folder" id="folder{{category.ID}}" xmlns="http://www.w3.org/2000/svg" width="24" height="19.2" viewBox="0 0 24 19.2">
<style type="text/css">
.folder:hover .stSpecial,
.folder:active .stSpecial {
fill: #4981C2 !important;
}
.stSpecial {
transition: all 0.3s ease 0s;
}
</style>
<g transform="translate(-32 -92)">
<g transform="translate(28 84)">
<path class="stSpecial" d="M13.6,8H6.4a2.389,2.389,0,0,0-2.388,2.4L4,24.8a2.4,2.4,0,0,0,2.4,2.4H25.6A2.4,2.4,0,0,0,28,24.8v-12a2.4,2.4,0,0,0-2.4-2.4H16Z" fill="#caced5" />
</g>
</g>
</svg> {{category.Name}}
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.