嵌套的Mat-CardAngular12

我正在開發一個儀表板，每個用戶都可以在其中可視化他的“作業區”和“專案”（一個作業區可以有多個專案）。為此，我以這種方式創建了兩個與 ngFor 結合的 mat-card：

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

    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'280'">
        <div  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"  *ngIf="ws.id === project.ws_id">
                        <mat-card-header id="{{project.id}}"  >
                            <div >                              
                                <mat-card-title>{{project.title}}</mat-card-title>
                            </div>
                            <div >
                                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 個空卡。

有沒有辦法重置第二個作業區卡的索引？這是正確的方法嗎？

uj5u.com熱心網友回復：

問題是您正在渲染專案卡，即使是您不想顯示的專案。這些卡占用空間。

我會通過將整張卡片包裝到一個 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>

標籤：

上一篇：發現帶有tabindex的HTMLElement將不會聚焦（）

下一篇：訂閱服務端api的兩個函式，依次執行