时间戳

首页 > 解决方案 > 表格未显示 ngFor-Angular 11 的所有行

html - 表格未显示 ngFor-Angular 11 的所有行

问题描述

我正在尝试创建一个表格来显示一周中的日期，每天都有他自己的可用约会，但我不知道为什么如果数组有 9 条记录，表格只显示 3 条，我可以在图像中看到表看起来被截断：

结果

HTML 代码是：

<table>
    <colgroup span="6" width="100"></colgroup>
    <tr>
      <td class="table-title" colspan="6">
        {{getMonth() | date: 'MMMM'}} {{getYear()}} / {{'tvo.terminauswahl.week' | translate}} {{date | date:'w'}}
      </td>
    </tr>
    <tr>
      <th scope="col" *ngFor="let dayName of headColumns;" >
        <span>{{dayName | translate}}</span>
        <br>
      </th>
    </tr>

    <tr>
    <td *ngFor="let dateOftheWeek of datesOfTheWeek">
        {{dateOftheWeek | date:'dd.MM'}}
    </td>
    </tr>

    <tr *ngFor="let availability of getData()">
      <td>
        <button class="appointments-bt" (click)="onNextStep($event)">
          {{availability.startTime}} - {{availability.endTime}}
        </button>
      </td>
    </tr>
</table>

标签： htmlcssangulartypescriptangular11

解决方案

我的表结构本身有错误，我的容器有溢出：隐藏。

所以我修复了两者，html的结果是：

<table>
    <colgroup span="6" [ngStyle]="{'width':'100'}"></colgroup>
    <tr>
      <td class="table-title" colspan="6">
        <button class="week" *ngIf="validPrevWeek()" (click)="prevWeek()"><i name="iconLeft_32" ></i></button>
        {{date | date: 'MMMM'}}
        {{date | date: 'YYYY'}} / {{'tvo.terminauswahl.week' | translate}} {{date | date:'w'}}
        <button class="week" (click)="nextWeek()"><i name="iconRight_32" ></i></button>
      </td>
    </tr>
    <tr>
      <th scope="col" *ngFor="let weekData of dayWithTime;let i = index;">
        <span>{{weekData.day | translate}}</span>
        <br>
        <span>{{weekData.date | date:'dd.MM'}}</span>
      </th>
    </tr>
    <tr >
      <td *ngFor="let weekData of dayWithTime; let i = index;" class="dayColumn" [ngClass]="changeBG()">
        <div *ngFor="let availability of weekData.appointments;">
          <div *ngIf="availability.showAppointment else noAvailability" >
            <button class="appointments-bt" (click)="updateDateSelected($event, weekData.date)">
              {{availability.startTime}} - {{availability.endTime}}
            </button>
          </div>
        </div>
      </td>
    </tr>
  </table>

推荐阅读