angular-material2 相关问题

我真的很挣扎于我认为是一个简单的问题.. 我有一个页眉、一个内容区域和一个页脚，我正在使用 fxLayout，最简单的是：我真的在努力解决我认为是一个简单的问题.. 我有一个页眉、一个内容区域和一个页脚，我正在使用 fxLayout，最简单的是： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto"> <h1>Title here</h1> <div fxLayout="column" style="overflow-y:auto"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 我不明白的是为什么红色容器不在页眉和页脚之间滚动。这里是Stackblitz 我真的不想向父 div 添加 height:100vh，因为这会破坏其他页面，即使我这样做，它仍然无法按我的预期工作。真的希望有人能对此有所启发。提前谢谢您！设置容器div的高度并删除fxLayout="column"，如下所示 - <div style="overflow-y:auto; height:100px"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> 更新如果您的页眉和页脚是固定大小（在下面的示例中为 100px），那么您可以使用 calc()- <div style="overflow-y:auto; height:calc(100vh - 100px)"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> 您还可以为 div 设置 top 和 bottom 并将位置设置为 fixed。 div 需要一些信息（高度、顶部、底部等）才能使其可滚动 - <div style="overflow-y:auto; position:fixed; top:50px; bottom:50px; width:100%"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> 如果你一直使用 fxLayout，它会起作用： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <h1>Title here</h1> <div fxFlex style="overflow-y:auto"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 堆栈闪电战我如何得到这个解决方案：第1步： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column">  <h1>Title here</h1> <div fxFlex fxLayout="column" style="overflow-y:auto">  <div fxFlex>  <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 第2步： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <h1>Title here</h1> <div fxFlex fxLayout="column">  <div fxFlex style="overflow-y:auto">  <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 步骤3： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <h1>Title here</h1>   <div fxFlex style="overflow-y:auto"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div>  </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 解决方案： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto"> <h1>Title here</h1> <div style="overflow-y:auto; height: 300px;"> // <== look here <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div>

angular flexbox angular-material2 angular-material-7

回答 3 投票 0

防止按下退出按钮时关闭角度材质对话框，但允许在单击背景时关闭

默认情况下，按下 esc 按钮时，对话框将关闭。但是，我不想要这种预期的行为。我想要发生的是防止按下 esc 按钮时关闭，但...

angular angular-material angular-material2

回答 2 投票 0

Angular 材料分页器无法工作

我正在尝试在我的应用程序上添加 Angular Material Paginator。 MatPaginatorModule 添加到模块中。我正在尝试在我的应用程序上添加 Angular Material Paginator。 MatPaginatorModule 添加到模块中。 <mat-paginator #paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator> 但是它给出了一个错误：未捕获的错误：模板解析错误：无法绑定到“长度”，因为它不是已知的属性 “垫分页器”。如果 mat-paginator 是 Angular 组件并且具有 length 输入，则验证它是否属于此模块。如果 mat-paginator 是 Web 组件，则将 CUSTOM_ELEMENTS_SCHEMA 添加到该组件的 @NgModule.schemas 以抑制此消息。也许我错过了什么？ "@angular/animations": "^5.0.1", "@angular/cdk": "^5.0.0-rc0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/material": "^5.0.0-rc0", 以防万一其他人遇到这个问题，只需在 app.module.ts 中导入模块即可 import { MatPaginatorModule } from '@angular/material/paginator'; 和 @NgModule({ ... imports: [ .... MatPaginatorModule ] 我注意到一件事我认为我应该提到，它可能有用也可能没用。如果您使用的是 Angular Materials 版本 5，则分页器模块位于 import {MatPaginatorModule} from '@angular/material'; 但是从 Angular 8 开始，它出现在 import {MatPaginatorModule} from '@angular/material/paginator'; 一定要在 app.module.ts 中添加该模块 import {MatPaginatorModule} from '@angular/material/paginator'; 对我来说，还需要 MatChipsModule 来编译。 import { MatChipsModule } from '@angular/material/chips'; 我昨天正在努力解决这个问题，我找到了解决方案，即向 project.module.ts 文件添加必要的记录。我认为你应该做这样的事情。 import { NameOfYourComponent } from './path_to_your_component/nameofyour.component'; ... @NgModule({ declarations: [ NameOfYourComponent , ... 我也是。我对 Angular Material 也有同样的问题从“@angular/material/paginator”导入{MatPaginatorModule}； @NgModule({ 声明：[ 应用程序组件， ... ], 进口：[ MatPaginator模块， ... ] 我的 html 文件中的标签 Angular Materia 不起作用。。请帮忙

angular pagination angular5 angular-material2 angular-material-paginator

回答 6 投票 0

mat-tab 删除 tab-body DOM 但不隐藏它

场景：我使用的是角度材料选项卡，每个不同的选项卡都有各自的动态组件。因此，当我切换选项卡时，它会从 DOM 中删除内容。当我再次回来时...

angular6 angular-material2 angular-material-6

回答 2 投票 0

markAsUntouched 未清除红线

我正在使用 Angular Material 的反应形式。当我单击 onsubmit() 时，我希望所有没有值的参数不会显示错误（红线）我尝试使用 this.formGroup.markAsUntouched...

angular angular-material2

回答 4 投票 0

角度材料表错误：无法绑定到“mdHeaderRowDef”，因为它不是“md-header-row”的已知属性

我正在尝试将 CDK 数据表转换为 Material Design 样式的数据表（请参阅：https://material.angular.io/components/table/overview），但是当我将 cdk 前缀更改为md，我得到以下...

angular angular-material angular-material2 angular-datatables angular-cdk

回答 4 投票 0

无法在 _closeDialogVia dialog.mjs 中设置 null 的属性（设置“_closeInteractionType”）

在这里输入图片描述将应用程序的材料迁移到 15 版本后，matdialog（内置关闭按钮）不工作并抛出以下错误： `错误类型错误：无法设置

angular angular-material angular-material2

回答 1 投票 0

通过@Input 参数传递日期不会影响角度材料日期范围选择器中的 [max] 指令

当通过 @Input 将日期传递给 [max] 指令时，日期选择器不会对传递的值做出反应。下面的组件代码 @成分（{ 选择器：'范围选择器'， templateUrl: '范围选择器.

angular angular-material angular-material2

回答 1 投票 0

Angular 5 Material mat-sidenav 切换不工作

我正在尝试使用官方打开/关闭示例让 sidenav 工作。我是 Angular 的新手，所以我不确定一切应该如何工作，但到目前为止，对于其他组件我一直很好......

angular5 toggle angular-material2 mat-sidenav

回答 1 投票 0

Mat-error 在实现 ControlValueAccessor 和 Validator 的自定义电话输入组件中未触发

我正在尝试通过在 Angular 中实现 ControlValueAccessor 和 Validator 来创建自定义电话输入组件，但我遇到了 mat-error 未触发的问题。 FormGroup 似乎有效，...

angular angular-material2 angular2-forms angular-validator angular-controlvalueaccessor

回答 0 投票 0

angular2-multiselect onFilterDeSelectAll 没有按预期工作，取消选择过滤器所有文本都没有出现在过滤器上

We are using angular2-multiselect using angular2-multiselect-dropdown': "4.6.3" version https://www.npmjs.com/package/angular2-multiselect-dropdown/v/4.6.3 中提供了这些选项

angular angular-material2

回答 0 投票 0

如何更改 Angular 6 材质单选按钮外部波纹颜色

我想更改 Angular Material Radio 按钮的默认颜色。我只能更改为单选按钮颜色。选项一我想更改 Angular Material Radio 按钮的默认颜色。我只能更改为单选按钮颜色。 <mat-radio-group> <mat-radio-button value="1">Option 1</mat-radio-button> <mat-radio-button value="2">Option 2</mat-radio-button> </mat-radio-group> 但是当我们单击选项时，我无法更改外部波纹效果颜色。有人请帮我解决这个问题。这里是完全风格垫单选按钮的解决方案 ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { opacity: 0.5 !important; /*click effect color change*/ background-color: blue !important; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: blue!important; /*inner circle color change*/ } ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { border-color:blue!important; /*outer ring color change*/ } 希望有帮助。自定义 Angular 材质的唯一方法是覆盖 css 规则，因此解决方案是覆盖单选按钮的 css 波纹规则： .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { background-color: rgba(0, 0, 0, .1) !important; } 我的默认主题是金色（白色），我需要将其更改为棕色（白色）。选中时我需要内圈和外圈棕色，未选中时需要外圈棕色。我还需要涟漪效应来匹配。这是有效的结果： & .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { background-color: brown !important; // Override material } & .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: brown !important; // Override material z-index: 3; } & .mat-radio-button .mat-radio-outer-circle { border-color: brown !important; // Override material z-index: 3; } 不需要改变不透明度。在我的场景中： // CSS :host ::ng-deep .mat-radio-button.mat-mycolor.mat-radio-checked .mat-radio-outer-circle { border-color: blue !important; } :host ::ng-deep .mat-radio-button.mat-mycolor .mat-radio-inner-circle { background-color: blue !important; } :host ::ng-deep .mat-radio-button.mat-mycolor .mat-ripple-element { background-color: blue !important; } // HTML <mat-radio-group [(ngModel)]="selectedAction"> <mat-radio-button [color]="radioColor" [style.color]="textColor" [value]="action" *ngFor="let action of actions">{{action}}</mat-radio-button> </mat-radio-group> // TS textColor: string = "#ff0000"; radioColor: string = "mycolor"; actions: string[] = ["Take a walk", "Mow the lawn"]; selectedAction: string = this.actions[0]; 更改垫子单选按钮的颜色将以下内容粘贴到您的模块中。单选按钮的默认颜色可以使用全局配置 MAT_RADIO_DEFAULT_OPTIONS 提供商供应商：[{ 提供：MAT_RADIO_DEFAULT_OPTIONS， useValue: { color: 'primary' }, }]

css angular angular-material material-design angular-material2

回答 5 投票 0

ngModelOptions 从 Angular 模板驱动表单中删除表单控制

我有一个只有 1 个可编辑字段（日期字段）的网格，我想在其中添加一些验证逻辑（用户不能输入随机字符串等）。我正在使用模板驱动的表单，这样我就可以使用我有一个只有 1 个可编辑字段（日期字段）的网格，我想在其中添加一些验证逻辑（用户不能输入随机字符串等）。我正在使用 template driven form 以便我可以使用 <mat-error> 向用户显示实际错误。现在，我遇到了一个问题，即日期字段（截止日期）没有绑定到从服务器获取的数据，尽管其他列（请注意，我没有将其他列作为表单控件）。添加 [ngModelOptions]="{standalone: true}" 时，数据绑定问题已修复，但控件不再添加到表单中。下面语句的控制台日志记录显示我为空，而不是未添加 ngModelOptions 时：因此，我不能再使用我的验证逻辑，因为（据我所知）它与表单控件结合在一起。我在这里做错了什么，可以做些什么来补救？我的代码片段相同： <form #myForm="ngForm"> <mat-table matSort [dataSource]="dataSource" #table> <ng-container matColumnDef="col1">....</ng-container> <ng-container matColumnDef="col2">....</ng-container> ..... <ng-container class="form-group" matColumnDef="dueDate"> <mat-header-cell *matHeaderCellDef mat-sort-header="dueDate"> <div> <div style="display: flex; align-items: center; cursor: pointer"> Due Date </div> </div> </mat-header-cell> <mat-cell *matCellDef="let element;"> <mat-form-field appearance="fill" style="width:100px"> <mat-label>Choose Due Date</mat-label> <input matInput type="text" [matDatepicker]="picker1" name="dueDate" #dueDate="ngModel" class="form-control" [(ngModel)]="element.dueDate" autocomplete="off" (ngModelChange)="onDueDateChanges($event, element)" [ngModelOptions]="{standalone: true}" [matDatepicker]="picker1"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> </mat-cell> </ng-container> ...... </mat-table> </form>

html angular typescript angular-material2

回答 0 投票 0

Angular material design - 如何添加自定义按钮颜色？

我想添加自己的自定义颜色，类似于“primary”、“warn”等。例如，我为橙色背景添加了一个类，但我将其用作类而不是颜色属性...

angular material-design angular-material2

回答 10 投票 0

angular-material2 相关问题

最新问题