angular-material 相关问题

Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。

如何避免 Angular 材质中出现额外的 mat-form-field-underline

我遇到一个问题，为什么在使用组件时会出现额外的 mat-form-field-underline 。我的页面使用此标记：我遇到一个问题，为什么在使用组件时会出现额外的 mat-form-field-underline。我的页面使用此标记： <mat-form-field class="col-md-6"> <app-mat-select-all [data]="tractList$" formControlName="tractList" fieldName="name" [multiselect]=true labelText="Tract List" idField="guid" > </app-mat-select-all> </mat-form-field> 我的自定义组件具有以下模板代码 <form novalidate [formGroup]="form"> <mat-form-field> <mat-label>{{labelText}}</mat-label> <mat-select #select [multiple]="multiselect" [formControl]="selectField" > <div class="select-all"> <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected" [ngModelOptions]="{standalone: true}" [indeterminate]="isIndeterminate()" [checked]="isChecked()" (click)="$event.stopPropagation()" (change)="toggleAllSelection($event)">{{text}}</mat-checkbox> </div> <mat-option *ngFor="let item of data" [value]="item[idField]"> {{item[fieldName]}} </mat-option> </mat-select> </mat-form-field> </form> 在渲染的页面上看起来像这样当我将以下行添加到我的父样式表中时，所有 mat-form-field-underlines 都消失了，这不是我想要的。如果我删除自定义组件中的 mat-form-field，我只会得到一行，但 mat-form-field-underline 的对齐方式与页面上的其他组件不对齐。所以我需要找到一种方法，只针对第二个下划线才能删除。 ::ng-deep .mat-form-field-underline { display: none; } 这是一个 stackblitz 示例，演示了第二下划线的问题 StackBlitz 示例这是我检查时的代码，似乎由于某种原因在 mat-form-field 内有一个 mat-form-field。不知道为什么？ <mat-form-field _ngcontent-jtb-c709="" class="mat-form-field col-md-6 ng-tns-c393-17 mat-primary mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder"><div class="mat-form-field-wrapper ng-tns-c393-17"><div class="mat-form-field-flex ng-tns-c393-17"><div class="mat-form-field-infix ng-tns-c393-17"><app-mat-select-all _ngcontent-jtb-c709="" formcontrolname="tractList" fieldname="name" labeltext="Tract List" idfield="guid" _nghost-jtb-c804="" ng-reflect-field-name="name" ng-reflect-label-text="Tract List" ng-reflect-id-field="guid" ng-reflect-name="tractList" ng-reflect-form-control-name="tractList" class="ng-tns-c393-17 ng-untouched ng-pristine ng-valid" ng-reflect-multiselect="true" ng-reflect-data="[object Object],[object Object"><form _ngcontent-jtb-c804="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-valid"><mat-form-field _ngcontent-jtb-c804="" class="mat-form-field ng-tns-c393-18 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid"><div class="mat-form-field-wrapper ng-tns-c393-18"><div class="mat-form-field-flex ng-tns-c393-18"><div class="mat-form-field-infix ng-tns-c393-18"><mat-select _ngcontent-jtb-c804="" role="combobox" aria-autocomplete="none" aria-haspopup="true" class="mat-select ng-tns-c500-19 ng-tns-c393-18 ng-star-inserted mat-select-empty mat-select-multiple ng-untouched ng-pristine ng-valid" ng-reflect-multiple="true" ng-reflect-form="[object Object]" aria-labelledby="mat-form-field-label-19 mat-select-value-15" id="mat-select-14" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c500-19"><div class="mat-select-value ng-tns-c500-19" ng-reflect-ng-switch="true" id="mat-select-value-15"><span class="mat-select-placeholder mat-select-min-line ng-tns-c500-19 ng-star-inserted"></span></div><div class="mat-select-arrow-wrapper ng-tns-c500-19"><div class="mat-select-arrow ng-tns-c500-19"></div></div></div></mat-select><span class="mat-form-field-label-wrapper ng-tns-c393-18"><label class="mat-form-field-label ng-tns-c393-18 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-19" ng-reflect-ng-switch="true" for="mat-select-14" aria-owns="mat-select-14"><mat-label _ngcontent-jtb-c804="" class="ng-tns-c393-18 ng-star-inserted">Tract List</mat-label></label></span></div></div><div class="mat-form-field-underline ng-tns-c393-18 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-18"></span></div><div class="mat-form-field-subscript-wrapper ng-tns-c393-18" ng-reflect-ng-switch="hint"><div class="mat-form-field-hint-wrapper ng-tns-c393-18 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><div class="mat-form-field-hint-spacer ng-tns-c393-18"></div></div></div></div></mat-form-field></form></app-mat-select-all><span class="mat-form-field-label-wrapper ng-tns-c393-17"></span></div></div><div class="mat-form-field-underline ng-tns-c393-17 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-17"></span></div><div class="mat-form-field-subscript-wrapper ng-tns-c393-17" ng-reflect-ng-switch="hint"><div class="mat-form-field-hint-wrapper ng-tns-c393-17 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><div class="mat-form-field-hint-spacer ng-tns-c393-17"></div></div></div></div></mat-form-field> 当你这样做时： ::ng-deep .mat-form-field-underline { display: none; } 这适用于具有此类的所有材质组件。您应该做的是将自定义类添加到 HTML 内的组件，然后在 SCSS 文件中像这样引用它： <mat-form-field class="custom-class"> ... </mat-form-field> ::ng-deep .custom-class .mat-form-field-underline { display: none; } 现在，只有该组件会受到 ::ng-deep 覆盖的影响。工作示例在带有基于 MDC 的组件的 Angular-Material 15 及更高版本中，以下代码隐藏了 mat-select 的额外下划线，而不影响其他表单字段组件： mat-form-field:has(mat-select) div[matformfieldlineripple] { display: none; } 在这里，您将波纹 div 隐藏在 mat-form-fields 中，其中有 mat-select 。

javascript css angular typescript angular-material

回答 2 投票 0

放置在列表中时，材质凸起按钮会被剪切

放置在列表中时，材料凸起按钮会被剪切。如何解决这个问题？当我在浏览器中重写 mdc-list-item__content 类时，我能够使其看起来正确。但我不是

angular angular-material

回答 1 投票 0

删除后无法取消选择所有复选框

我有 3 个复选框和一个主复选框来选择或取消选择它们。主复选框工作正常，直到我从表中删除一些行。当一些数据被删除后，我可以检查主要...

angular typescript angular-material

回答 3 投票 0

Angular 材质：如何在隐藏 mat-tab 时隐藏 mat-tab-header？

我有一个基本的 mat-tab-group，其中嵌套了 2 个 mat-tab。两个 mat-tab 都有一个 [hidden] 输入属性，由我的代码中更改的布尔值确定。它就像一种魅力......