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

【问题标题】：Table does not show all lines with ngFor-Angular 11表格未显示 ngFor-Angular 11 的所有行
【发布时间】：2021-10-10 12:19:32
【问题描述】：

我正在尝试创建一个表格来显示一周中的日期，每天都有他自己的可用约会，但我不知道为什么如果数组有 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>

【问题讨论】：

这没有足够的信息 - ngfor 循环应该可以工作 - 所以这里很可能有一个问题 let dateOftheWeek of datesOfTheWeek, 尝试添加一个索引 let dateOftheWeek of datesOfTheWeek, let i = index;
在 getData 方法之后使用异步管道。 let availability of getData() | async.
可能您在控制台中有错误。（您可以使用 F12 看到） Angular 发生错误时不再绘制。检查“getdata()”是否返回一个数组并且所有元素都有 startTime 和 endTime -否则使用安全运算符 availability?.startTime 和 availability?.endTime
感谢您的回答，Eliseo 您在控制台中是对的，我没有错误，但在我拥有的 css 中，容器帽子特定大小，我删除了它，现在工作正常。跨度>
除了您之外，没有任何人可以最终回答这个问题。这三个人做出了有根据的猜测，但仅此而已。鉴于所写的问题和答案，我认为这对以后的访问者没有帮助。

标签： html css angular typescript angular11

【解决方案1】：

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

所以我修复了两者，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>

【讨论】：