如何使用 *ngFor 在 Angular 中显示数据行答案

【问题标题】：How to use *ngFor to show rows of data in Angular如何使用 *ngFor 在 Angular 中显示数据行
【发布时间】：2023-03-13 12:27:01
【问题描述】：

我正在尝试使用 * 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>

【问题讨论】：

类别 = [ ]; this.categories = JSON.parse(resultado);
已经测试它不会加载类别
JSON.parse(resultado) 是一个数组吗？
是的，我需要把它转换成一个数组，否则它会给 * nfor 一个错误
@John : 也欢迎投票 :)

标签： html css angular core

【解决方案1】：

删除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>

【讨论】：

【解决方案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>

【讨论】：