嵌套垫卡 Angular 12

Question

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

 <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 个空卡片。

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

Answer 1

问题是您甚至为不想显示的项目渲染项目卡片。这些卡片占 space.

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

的空节点

尝试这样的事情：

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

嵌套垫卡 Angular 12

Nested Mat-Card Angular 12

angular

mat-card