我遇到了一个非常奇怪的问题。我正在开发一个 angular 13.0.2 的网站，我正在使用 mat-stepper 创建一个表单（和 ngx-editor ，我会提到它以防出现问题）。当页面加载时，除了 mat-stepper 之外的所有内容都完美显示。我必须点击屏幕才能显示。我必须承认我的表格中有很多元素，但我不知道是不是因为这个。这里可能有什么问题？
谢谢。
PS：这里是整个 html 代码，因为还没有后端。
<div class="formprojets col-lg-15">
<h2>Nouvelle charte de projet</h2>
<mat-stepper #stepper>
<mat-step [stepControl]="groupe1" errorMessage="Name is required.">
<form [formGroup]="groupe1">
<div class="desczone">
<h6>DESCRIPTION GENERALE SYNTHETIQUE DU PROJET</h6>
<p>Comment se présente le contexte de l’élaboration du projet ?</p>
<p>De quoi parle le projet généralement ?</p>
<ng-template matStepLabel>Descritpion - Acceptation</ng-template>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp1" [editor]="editor" [ngModel]="desc" [disabled]="false"
[placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
<div>
<h6>ACCEPTATION DU PROJET:</h6>
<p>Quels sont les conventions entre les parties prenantes ?</p>
<p>Que contient ces conventions ?</p>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor2" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp1_2" [editor]="editor2" [ngModel]="accept" [disabled]="false"
[placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
</form>
</mat-step>
<mat-step [stepControl]="groupe2" errorMessage="Tous les champs doivent être remplis">
<form [formGroup]="groupe2">
<div class="desczone">
<h6>OBJECTIFS ET CONTENU DU PROGRAMME</h6>
<p>Présentation des objectifs générales du projet par contenu</p>
<ng-template matStepLabel>Objectifs - Livrables</ng-template>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor3" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp2_1" [editor]="editor3" [disabled]="false"
[placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
<div class="desczone">
<h6>LIVRABLES MAJEURES DU PROJET</h6>
<p>Quels sont les livrables majeurs représentant les étapes importants conduisant à l’atteinte des
objectifs du projet ?</p>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor4" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp2_2" [editor]="editor4" [disabled]="false"
[placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
</form>
</mat-step>
<mat-step [stepControl]="groupe3" errorMessage="Address is required.">
<form [formGroup]="groupe3">
<div class="desczone">
<h6>DOMAINE D’APPLICATION DU PROJET </h6>
<p>Quels sont les limites du projet ?</p>
<ng-template matStepLabel>Domaine d'application - Parties prenantes</ng-template>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor5" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp3_1" [editor]="editor5" [disabled]="false"
[placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h6>LISTE DES PARTIES PRENANTES DU PROJET</h6>
<p>Quels sont les limites du projet ?</p>
<div style="margin-top: 1%;">
<mat-form-field appearance="fill" class="form-input">
<mat-label>Rôle</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="role"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill" class="form-input">
<mat-label>Dénomination</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="denomination"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<button (click)="add_liste()" mat-raised-button class="add">Ajouter</button>
</div>
<div class="col-lg-8">
<table mat-table [dataSource]="dataSource" matSort class="tablePart">
<ng-container matColumnDef="n°">
<th mat-header-cell *matHeaderCellDef mat-sort-header> N° </th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<ng-container matColumnDef="role">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Rôle </th>
<td mat-cell *matCellDef="let row"> {{row.role}}</td>
</ng-container>
<ng-container matColumnDef="denomination">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Dénomination </th>
<td mat-cell *matCellDef="let row"> {{row.denomination}}</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
<td mat-cell *matCellDef="let row">
<div class="row">
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="edit">
<mat-icon>edit</mat-icon>
</button>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter</td>
</tr>
</table>
</div>
</div>
</form>
</mat-step>
<mat-step [stepControl]="groupe4" errorMessage="Address is required.">
<ng-template matStepLabel>Stratégie - Budget</ng-template>
<form [formGroup]="groupe4">
<div class="row">
<div class="col-lg-6 desczone">
<h6>STRATEGIE DE MISE EN ŒUVRE</h6>
<p>Quels sont les stratégies générales pour mettre en œuvre le projet ?</p>
<div style="margin-top: 1%;">
<mat-form-field appearance="fill" class="form-input">
<mat-label>Partie Prenante</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="partie_prenante"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill">
<mat-label>Hierarchie</mat-label>
<mat-select [(ngModel)]="hierarchie">
<mat-option value="one">1</mat-option>
<mat-option value="two">2</mat-option>
</mat-select>
</mat-form-field>
</div>
<button (click)="add_strat()" mat-raised-button class="add">Ajouter</button>
</div>
<div class="col-lg-6 desczone">
<table mat-table [dataSource]="dataSourceStrat" matSort class="tablePart">
<ng-container matColumnDef="n°">
<th mat-header-cell *matHeaderCellDef mat-sort-header> N° </th>
<td mat-cell *matCellDef="let row"> {{row.nom}}</td>
</ng-container>
<ng-container matColumnDef="hierarchie">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Hiérarchie </th>
<td mat-cell *matCellDef="let row"> {{row.logo}}</td>
</ng-container>
<ng-container matColumnDef="partieprenante">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Partie Prenante </th>
<td mat-cell *matCellDef="let row"> {{row.logo}}</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
<td mat-cell *matCellDef="let row">
<div class="row">
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>Edit</mat-icon>
</button>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsStrat"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsStrat;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-6 desczone">
<h6>BUDGET PREVISIONNEL DU PROJET</h6>
<p>A combien se chiffre le montant prévisionnel par contenu du projet ?</p>
<div style="margin-top: 1%;">
<mat-form-field appearance="fill" class="form-input">
<mat-label>Désignation</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="designation"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill" class="form-input">
<mat-label>Montant</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="montant"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill">
<mat-label>Devise</mat-label>
<mat-select [(ngModel)]="devise">
<mat-option value="one">EUR</mat-option>
<mat-option value="two">AR</mat-option>
</mat-select>
</mat-form-field>
</div>
<button (click)="add_budget()" mat-raised-button class="add">Ajouter</button>
</div>
<div class="col-lg-6 desczone">
<table mat-table [dataSource]="dataSourceBudget" matSort class="tablePart">
<ng-container matColumnDef="designation">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Désignation</th>
<td mat-cell *matCellDef="let row"> {{row.nom}}</td>
</ng-container>
<ng-container matColumnDef="montant">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Montant</th>
<td mat-cell *matCellDef="let row"> {{row.logo}}</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
<td mat-cell *matCellDef="let row">
<div class="row">
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>Edit</mat-icon>
</button>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsBudget"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsBudget;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter</td>
</tr>
</table>
<div class="row" style="margin-top: 5%;">
<div class="col-lg-6">
<p style="font-weight:bold;">Total</p>
</div>
<div class="col-lg-6">
###
</div>
</div>
</div>
</div>
</form>
</mat-step>
<mat-step [stepControl]="groupe5" errorMessage="Address is required.">
<form [formGroup]="groupe5">
<ng-template matStepLabel>Exigeances - Risques</ng-template>
<div class="desczone">
<h6>LISTE DES EXIGENCES RELATIVES AU PROGRAMME</h6>
<p>Quel sont les exigences relatives à la passation des marchés au niveau international et national
?</p>
<div class="editorzone">
<p class="titleeditor"> International</p>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor6" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp5_1" [editor]="editor6"
[disabled]="false" [placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
<div class="editorzone">
<p class="titleeditor"> National</p>
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor7" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor formControlName="grp5_2" [editor]="editor7"
[disabled]="false" [placeholder]="'Type here...'">
</ngx-editor>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 desczone">
<h6>RISQUES DU PROJET</h6>
<p>Comment seront gérés les risques du projet ?</p>
<div style="margin-top: 1%;">
<mat-form-field appearance="fill" class="form-input">
<mat-label>Risques et enjeux</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="enjeux"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill" class="form-input">
<mat-label>Stratégie</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="strategie"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill" class="form-input">
<mat-label>Actions de réponses</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="actionreponse"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill" class="form-input">
<mat-label>Surveillance et mesurage</mat-label>
<input matInput type="text" placeholder="" [(ngModel)]="mesurage"
[ngModelOptions]="{standalone: true}" required>
</mat-form-field>
</div>
<button (click)="add_risques()" mat-raised-button class="add">Ajouter</button>
</div>
<div class="col-lg-6 desczone">
<table mat-table [dataSource]="dataSourceRisques" matSort class="tablePart">
<ng-container matColumnDef="risques">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Risques et enjeux négatifs</th>
<td mat-cell *matCellDef="let row"> {{row.nom}}</td>
</ng-container>
<ng-container matColumnDef="strategie">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Stratégie</th>
<td mat-cell *matCellDef="let row"> {{row.logo}}</td>
</ng-container>
<ng-container matColumnDef="actionsrep">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Actions et réponses</th>
<td mat-cell *matCellDef="let row"> {{row.logo}}</td>
</ng-container>
<ng-container matColumnDef="surveillance">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Surveillance et mesurage</th>
<td mat-cell *matCellDef="let row"> {{row.logo}}</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
<td mat-cell *matCellDef="let row">
<div class="row">
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="col-lg-4 actionrow">
<button mat-mini-fab aria-label="Ajouter un projet" class="delete">
<mat-icon>Edit</mat-icon>
</button>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsRisques"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsRisques;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter</td>
</tr>
</table>
</div>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>Vous avez terminé</p>
<div>
<button mat-button matStepperPrevious>Retour</button>
<button mat-button (click)="stepper.reset()">Réinitialiser</button>
<button mat-button class="add" (click)="submit()">Valider</button>
</div>
</mat-step>
</mat-stepper>