Angular Material V16 的奇怪行为

Question

很奇怪地遇到了这个错误。

当我的页面大小通过 mat-form-fields 扩展页面高度时，我遇到了一些问题，即某些部分未加载，主要是有角度的材料部分。这是一个 GIF。

正如您在上次重新加载时看到的那样，我已经删除了车辆垫子表单字段。当它消失时，尺寸小于页面高度，并且它可以正常工作。

有谁知道这可能是什么原因造成的？这是我的代码。

HTML

<ng-container>
  <h3 class="fw-bolder mb-3">{{ 'devices.createDevice' | translate }}</h3>
  <div class="white-container">
    <h3 class="fw-bolder text-m mb-2">{{ 'devices.enterDeviceInfo' | translate }}</h3>
    <form>
      <h5>{{ 'common.name' | translate }}<span class="text-bright-red ms-1 mb-0">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{ 'common.name' | translate }}</mat-label>
        <input matInput [placeholder]="'common.enterValue' | translate" [(ngModel)]="device!.name">
      </mat-form-field>

      <h5>{{ 'devices.steeringWheel' | translate }}<span class="text-bright-red ms-1">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{'devices.steeringWheel' | translate}}</mat-label>
        <input type="text"
               [placeholder]="'common.selectValue' | translate"
               matInput
               [(ngModel)]="device!.lhd"
               [matAutocomplete]="steeringWheel">
        <mat-autocomplete #steeringWheel="matAutocomplete">
          <mat-option [value]="'devices.lhd' | translate">{{ 'devices.lhd' | translate}}</mat-option>
          <mat-option [value]="'devices.rhd' | translate">{{ 'devices.rhd' | translate}}</mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <h5>{{ 'devices.connectedBy' | translate }}<span class="text-bright-red ms-1">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{'devices.connectedBy' | translate}}</mat-label>
        <input type="text"
               [placeholder]="'common.selectValue' | translate"
               matInput
               [(ngModel)]="device!.connection"
               [matAutocomplete]="connectedBy">
        <mat-autocomplete #connectedBy="matAutocomplete">
          <mat-option [value]="'devices.obd' | translate">{{ 'devices.obd' | translate}}</mat-option>
          <mat-option [value]="'devices.radio' | translate">{{ 'devices.radio' | translate}}</mat-option>
          <mat-option [value]="'devices.fuses' | translate">{{ 'devices.fuses' | translate}}</mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <h5>{{ 'devices.sim' | translate }}<span class="text-bright-red ms-1">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{'devices.sim' | translate}}</mat-label>
        <input type="text"
               [placeholder]="'common.selectValue' | translate"
               matInput
               [(ngModel)]="device!.assignedSim"
               [matAutocomplete]="simAuto">
        <mat-autocomplete #simAuto="matAutocomplete">
          <mat-option [value]="'devices.obd' | translate">{{ 'devices.obd' | translate}}</mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <h5>{{ 'devices.user' | translate }}<span class="text-bright-red ms-1">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{'devices.user' | translate}}</mat-label>
        <input type="text"
               [placeholder]="'common.selectValue' | translate"
               matInput
               [(ngModel)]="device!.assignedUser"
               [matAutocomplete]="userAuto">
        <mat-autocomplete #userAuto="matAutocomplete">
          <mat-option [value]="'devices.obd' | translate">{{ 'devices.obd' | translate}}</mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <h5>{{ 'devices.group' | translate }}<span class="text-bright-red ms-1">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{'devices.group' | translate}}</mat-label>
        <input type="text"
               [placeholder]="'common.selectValue' | translate"
               matInput
               [(ngModel)]="device!.assignedGroup"
               [matAutocomplete]="groupAuto">
        <mat-autocomplete #groupAuto="matAutocomplete">
          <mat-option [value]="'devices.obd' | translate">{{ 'devices.obd' | translate}}</mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <h5>{{ 'devices.vehicle' | translate }}<span class="text-bright-red ms-1">*</span></h5>  <!-- TODO ngIf required validations -->
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>{{'devices.vehicle' | translate}}</mat-label>
        <input type="text"
               [placeholder]="'common.selectValue' | translate"
               matInput
               [(ngModel)]="device!.assignedVehicle"
               [matAutocomplete]="vehicleAuto">
        <mat-autocomplete #vehicleAuto="matAutocomplete">
          <mat-option [value]="'devices.obd' | translate">{{ 'devices.obd' | translate}}</mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </div>
</ng-container>

TS

import {Component, Input, OnInit} from '@angular/core';
import {IDevice} from "../devices.model";

@Component({
  selector: 'app-device-edit',
  templateUrl: './device-edit.component.html',
  styleUrls: ['./device-edit.component.scss']
})
export class DeviceEditComponent implements OnInit {
  @Input() device?: IDevice;

  public create!: boolean;

  constructor() { }

  ngOnInit() {
    if (!this.device) {
      this.device = {
        name: '',
        companyId: 0,
        lhd: null,
        connection: null,
      }
      this.create = true;
    }
  }
}

Answer 1

添加滚动：考虑为溢出的内容实现滚动容器。这可确保组件加载到视口中并正确设置样式。这是一个例子：

HTML

<div class="white-container" style="overflow-y: auto; height: 500px;"></div>

调整表单布局：您可以重组表单以最小化其占用的垂直空间。这可能涉及使用弹性盒或网格布局来实现更紧凑的排列。