0

我正在开发一个仪表板，每个用户都可以在其中可视化他的“工作区”和“项目”（一个工作区可以有多个项目）。为此，我以这种方式创建了两个与 ngFor 结合的 mat-card：

 <mat-card id="ws.id" *ngFor="let ws of workspace; let i = index">        
    <mat-card-header class="app">
        <div class="column1">
            <mat-card-title>WorkSpace: {{ws.name}}
                <button mat-icon-button [matMenuTriggerFor]="menu">
                    <mat-icon>more_vert</mat-icon>
                </button>
                ...
            </mat-card-title>
        </div>
        <div class="column2">
            ...
        </div>
    </mat-card-header>

    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'280'">
        <div class="content" style="width: 95%;">
            <div id="ws.name" fxLayout="row wrap" style="align-self: flex-start;"  fxLayoutGap="16px grid">
                <div id="ws.id" style="align-self: flex-start;" fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let project of projects; let i = index">
                    <mat-card id="projects" class="mat-elevation-z4" *ngIf="ws.id === project.ws_id">
                        <mat-card-header id="{{project.id}}"  class="app">
                            <div class="column1">                              
                                <mat-card-title>{{project.title}}</mat-card-title>
                            </div>
                            <div class="column2">
                                xxx
                            </div>
                        </mat-card-header>

                        <mat-card-content [routerLink]="['/projects/', project.ws_id, project.id]" style="text-align: center;">
                           ...
                        </mat-card-content>
                    </mat-card>
                </div>
            </div>
        </div>
    </mat-card-content>

</mat-card>

第二张工作区卡片以与第一张卡片上的项目数量相等的空项目卡片数量开始。在附图中，我在第一个工作区有 7 个项目，可以看出，第二个工作区的项目从第 8 个“位置”开始，首先有 7 个空卡。

在此处输入图像描述

有没有办法重置第二个工作区卡的索引？这是正确的方法吗？

4

1 回答 1

1

问题是您正在渲染项目卡，即使是您不想显示的项目。这些卡占用空间。

我会通过将整张卡片包装到一个 ng-container 中来解决这个问题，该容器不会在 DOM 树中作为节点呈现，而只会呈现它包含的内容。这样你就不会得到占用空间的空节点。

尝试这样的事情：

 <mat-card id="ws.id" *ngFor="let ws of workspace; let i = index">        
    <mat-card-header class="app">
        <div class="column1">
            <mat-card-title>WorkSpace: {{ws.name}}
                <button mat-icon-button [matMenuTriggerFor]="menu">
                    <mat-icon>more_vert</mat-icon>
                </button>
                ...
            </mat-card-title>
        </div>
        <div class="column2">
            ...
        </div>
    </mat-card-header>

    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'280'">
        <div class="content" style="width: 95%;">
            <div id="ws.name" fxLayout="row wrap" style="align-self: flex-start;"  fxLayoutGap="16px grid">
              <ng-container *ngFor="let project of projects; let i = index">
                <ng-container *ngIf="ws.id === project.ws_id">
                  <div id="ws.id" style="align-self: flex-start;" fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%">
                      <mat-card id="projects" class="mat-elevation-z4">
                          <mat-card-header id="{{project.id}}"  class="app">
                              <div class="column1">                              
                                  <mat-card-title>{{project.title}}</mat-card-title>
                              </div>
                              <div class="column2">
                                  xxx
                              </div>
                          </mat-card-header>

                          <mat-card-content [routerLink]="['/projects/', project.ws_id, project.id]" style="text-align: center;">
                             ...
                          </mat-card-content>
                      </mat-card>
                  </div>
                </ng-container>
              </ng-container>
            </div>
        </div>
    </mat-card-content>

</mat-card>

于 2022-01-25T09:39:44.800 回答