如何使用 *ngFor 显示 Angular 中的数据行

Question

我正在尝试使用 * ngFor 创建新的 "rows"，因为正在添加新的类别。

问题是当运行程序时，我没有收到任何错误，但也没有得到预期的结果。我尝试添加一些内容，但 * ngFor 中的所有内容都没有 "running" ...有人可以帮助我吗？

  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

您需要在组件中声明一个 public 类别列表：

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>

Answer 2

删除 ng-template，您的代码应在 *ngFor 中显示结果。这就是 <ng-template> 的工作原理。

您需要 ng-container 才能呈现 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>

如何使用 *ngFor 显示 Angular 中的数据行

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

html

css

core

angular