For 循环过滤而不在 angular table 中留下空格

Question

开发者！我正在尝试在 Angular 中用 for 循环填充 table，而不在不提交特定条件的循环上留下空白。

假设我有 2 个 ngfor 嵌套，其中第一个循环遍历 headers 数组，在水平位置显示它们，第二个循环遍历 objects 将在 HTML 中过滤，以垂直方式为每个 header 填充那些符合 header 规范的项目。

<ion-row>
  <ion-item *ngFor="let book of byGroup">
    <ion-col>
      <ion-label>{{book}}</ion-label>
      //looping on headers
      <ion-item *ngFor="let book1 of allBooks[0]">
        <ion-label *ngIf="book1.group==book">{{book1.title}}</ion-label>
      </ion-item>
    </ion-col>
    //An now here for each header I just loop the whole array of objects omitting 
    //those objects that don't match with the header string that in the time the loop goes over
  </ion-item>
</ion-row>

结果会是这样的：

如果没有空单元格，我如何正确设置它？提前致谢！！

Answer 1

添加两个条件book1.title && book1.title.trim().length.

最终代码：

<ion-row>
    <ion-item *ngFor="let book of byGroup">
        <ion-col>
            <ion-label>{{book}}</ion-label>
            //looping on headers
            <ion-item *ngFor="let book1 of allBooks[0]">
                <ion-label *ngIf="book1.group==book && book1.title && book1.title.trim().length">{{book1.title}}</ion-label>
            </ion-item>
        </ion-col>
        //An now here for each header I just loop the whole array of objects omitting 
       //those objects that don't match with the header string that in the time the loop goes over
               
    </ion-item>
</ion-row>

编辑：

希望它有效。我累了。在 Stackblitz.

分叉你的项目

For 循环过滤而不在 angular table 中留下空格

For loop filtered without leaving blank spaces in angular table

angular

loops

populate