Как использовать * ngFor для отображения строк данных в Angular

Question

Я пытаюсь использовать * ngFor для создания новых "строк" по мере добавления новых категорий.

Проблема заключается в том, что при запуске программы я не получаю никакой ошибки, но также не получаюпредназначены. Я пытался добавить несколько вещей, но все в * ng для "не работает" ... кто-нибудь может мне помочь?

  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

Удалите 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>

Answer 2

вам нужно объявить публичный список категорий в компоненте:

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>