How to use *ngFor to show rows of data in Angular - html

Question

I am trying to use * ngFor to create new "rows" as new categories are being added.
The problem is that when running the program, I do not receive any error but also do not get the intended. I've tried to add a few things, but everything under in * ngFor not "running" ... can anyone help me?
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>

Answer 1

Remove ng-template and your code should show results inside *ngFor. That's how <ng-template> works.
You need ng-container to render ng-template. Check this out
<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>

Answer 2

you need to declare a public list of categories in the component :
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();
});
}
and in the view wait for the data by adding an *ngIf :
<div class="bodyPermCardDam" *ngIf="categories">
<div *ngFor="let category of categories; let i = index">
...
</div>
</div>