angular-material2 相关问题

如何在运行时更改 Angular CDK 覆盖层的 dir 属性？

我使用的是 Angular 10，单击后将执行以下函数来执行方向更改： 私人changeHtmlDirection（方向：'rtl' | 'ltr'）{ document.getElementsByTagName("html&q...

Angular Material 2. 单击时将主题从浅色切换为深色

所以我有一个 Angular 2 Material 应用程序。 我想做的只是通过单击简单的按钮将主题从暗切换/切换为亮。 我该怎么做？

从 mat-country-select 获取整个 Country 数组

我在我的角度项目中使用反应式表单，并使用 mat-country-select 在我的子 FormComponent 中的 select 中显示国家/地区。 我在我的角度项目中使用反应式表单，并使用 mat-country-select 在我的子 FormComponent 中的 select 中显示国家/地区。 <mat-select-country class="full-width" [formControl]="form.controls.country" [required]="true" appearance="outline" [itemsLoadSize]="0" [value]="DEFAULT_COUNTRY" label="Choose country"> </mat-select-country> 我尝试制作模式对话框窗口来更新父 PlayerComponet 中的 Player，其结构如下。 export interface Player extends BaseResponse { lastName: string; firstName: string; dateOfBirth: Date; country: string; height: number; weight: number; position: string; jerseyNumber: number; teamName: string; teamId?: string | null; photoPath?: string | null; } 在 PlayerComponent 打开更新对话框窗口之前，我应该初始化并将表单传递给我的 FormComponent export class PlayersComponent implements OnInit { countries: Country[] = COUNTRIES; playerActionsForm!: FormGroup<PlayerActionsForm>; fillUpdatePlayerForm(player: Player) { this.playerActionsForm.controls.id.setValue(player.id); this.playerActionsForm.controls.firstName.setValue(player.firstName); this.playerActionsForm.controls.lastName.setValue(player.lastName); this.playerActionsForm.controls.birthDay.setValue(player.dateOfBirth); const country = this.countries.find( (country) => country.name === player.country, ); this.playerActionsForm.controls.country.setValue(country ? country : null); this.playerActionsForm.controls.height.setValue(player.height); this.playerActionsForm.controls.weight.setValue(player.weight); this.selectTeams$ .pipe( map((teams) => teams?.find((team) => team.id === player.teamId)), take(1), untilDestroyed(this), ) .subscribe((team) => { this.playerActionsForm.controls.team.setValue(team ? team : null); }); this.playerActionsForm.controls.jerseyNumber.setValue(player.jerseyNumber); this.playerActionsForm.controls.position.setValue(player.position); this.playerActionsForm.controls.experiences.setValue([]); } initializeActionsForm() { this.playerActionsForm = new FormGroup<PlayerActionsForm>({ id: new FormControl(''), firstName: new FormControl('', [ Validators.required, Validators.pattern(NAME_PATTERN), ]), lastName: new FormControl('', [ Validators.required, Validators.pattern(NAME_PATTERN), ]), birthDay: new FormControl(null, [ Validators.required, dateValidator(moment().subtract(18, 'years').toDate(), 'max'), ]), country: new FormControl(null, Validators.required), height: new FormControl(1.01, [ Validators.required, Validators.min(1.01), ]), weight: new FormControl(50.01, [ Validators.required, Validators.min(50.01), ]), team: new FormControl(null), position: new FormControl('', Validators.required), jerseyNumber: new FormControl(0, [ Validators.required, Validators.min(0), ]), experiences: new FormArray<FormGroup<PlayerExperienceForm>>([]), }); } ngOnInit(): void { this.initializeActionsForm(); } 我尝试使用 viewChild 来获取 mat-country-select [Countries] 的 Input 属性，但它不起作用。现在我使用手动创建的预定义数组 COUNTRIES。但我需要解决方案，可以轻松地通过名称获取某个国家/地区，而无需手动创建常量 您是否尝试过在垫选择上使用数据绑定？

交替行颜色角材料表

我想知道如何定位角度材质表内的偶数/奇数行，以便我可以将偶数/奇数行设置不同的背景颜色。 我设置了 ClaimFileHistoryDataSource 类：

一个组件中的多种材质分页在 Angular 中不起作用

我尝试创建一个组件，其中包含两个数据表，每个数据表都有另一个数据源。由于我的 *ngIf，我的表格在组件加载后不可见，因此我无法使用

有办法为每个mat-tab设置不同的下划线颜色吗？

我有材质角度垫片组件，我想为每个垫片设置不同的下划线颜色，我尝试使用backgroundColor和selectedTabChange属性，但我无法管理 ...

MatDialog 错误：没有 InjectionToken mat-dialog-scroll-strategy 的提供程序

通过在构造函数中包含提供者：MatDialog 构造函数（groupService：GroupService，公共对话框：MatDialog）{} 我在运行时收到以下错误 错误：没有 InjectionToken 的提供者...

SassError：找不到要导入的样式表。 @使用'~@angular/material'作为垫子；

我使用 CLI 创建了一个 Angular 项目。我正在使用 SCSS，并且我将 Angular Material 包含在自定义主题 iirc 中。我添加了几个虚拟组件，应用程序仍然构建得很好。然后我需要

为什么`setAllSelected`不触发`listbox.valueChange`事件，我们如何让它发出？

为什么 setAllSelected 没有导致 listbox.valueChange 发出？我们怎样才能确保它发射？ 从 '@angular/core' 导入 { Component, ViewChild }; 从 '@angular/cdk/l... 导入 { CdkListbox, CdkOption } ...

向 mat-tab-group 添加按钮

我是 Angular 2/4 的新手，并且一直很喜欢 Material Design 组件 (https://material.angular.io)。我有一个简单的 SPA，它使用选项卡组在动态视图之间切换。 ...

在外部点击时关闭 mat-sidenav

每当用户单击不在其中的某个位置时，我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用 rxjs 的主题 应用程序模板 每当用户单击不在其中的某个位置时，我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用 rxjs' Subject 应用程序模板 <app-sidenav [openedSubject]="openedSubject"></app-sidenav> 应用程序组件 openedSubject = new Subject<boolean>(); @HostListener('click', ['$event']) clickedInside($event) { this.openedSubject.next(false); } SidenavComponent @Input() openedSubject: Subject<boolean>; @ViewChild('sidenav') sidenav: MatSidenav; ngAfterContentInit() { this.openedSubject.subscribe(opened => { if(this.sidenav.opened) opened || this.sidenav.toggle(); }); } toggle() { this.openedSubject.next(!this.sidenav.opened); } Sidenav模板 <mat-sidenav-container> <mat-sidenav #sidenav><mat-toolbar color="primary">Menu</mat-toolbar> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary"> <button (click)="toggle()">toggle</button> </mat-toolbar> </mat-sidenav-content> </mat-sidenav-container> https://stackblitz.com/edit/ng-sidenav-experiments 但是好像有逻辑错误。 click 事件 覆盖整个文档，但它应该排除侧边导航和工具栏。 成功了。问题是我对 HostListener 的使用，而我真的只想像这样 (click) ： <sidenav [openedSubject]="openedSubject"></sidenav> <fake-route-view (click)="dismissSidebar()"></fake-route-view> 完整工作版本：https://stackblitz.com/edit/ng-sidenav-experiments

设置 Angular Material Tooltip 的字体大小

我对网络开发非常陌生，我不知道如何解决以下问题，尽管它可能很简单。 我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：...

是否可以设置 Angular Material 主题的文本颜色？

使用Material的公共函数而不覆盖CSS是否可以设置文本颜色？ Define-palette 函数接受一个名为 text 的参数，这设置了 pal 的文本属性...

覆盖 md-dialog-container 的 Angular 材质大小和样式

我正在使用 Angular Material，并且我正在使用 md-dialog 作为我的画廊的弹出窗口。默认的动画和样式看起来不错。但是，我想更改 md-

更改角度材质的默认扩展面板箭头颜色

我有一个角度扩展面板，如下所示。如何将下面箭头的颜色更改为白色？ 我的代码（HTML）： 我有一个角度扩展面板，如下所示。如何将下面箭头的颜色更改为白色？ 我的代码（HTML）： <md-expansion-panel> <md-expansion-panel-header> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> 我的代码（TS）： import {Component} from '@angular/core'; /** * @title Basic expansion panel */ @Component({ selector: 'expansion-overview-example', templateUrl: 'expansion-overview-example.html', }) export class ExpansionOverviewExample {} 工作代码如下： <md-expansion-panel> <md-expansion-panel-header class="specific-class"> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> import {Component} from '@angular/core'; /** * @title Basic expansion panel */ @Component({ selector: 'expansion-overview-example', templateUrl: 'expansion-overview-example.html', styles: [` ::ng-deep .specific-class > .mat-expansion-indicator:after { color: white; } `], }) export class ExpansionOverviewExample {} 说明： 为了设置 Angular 动态添加的嵌套元素的样式 材质组件需要使用特殊的选择器::ng-deep。 这允许解决视图封装。 为了覆盖动态应用的内置组件样式 您需要增加选择器的CSS 特异性。那是 添加额外 CSS 类special-class的原因。如果你 将使用选择器 ::ng-deep .mat-expansion-indicator:after 扩展组件将覆盖它。 您不必使用 ng-deep。相反，您可以将此代码添加到样式表中： .mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: white; } 请参阅 GitHub 文档 https://github.com/angular/components/tree/master/src/material/expansion 它以这种方式对我有用 HTML <mat-accordion> <mat-expansion-panel class="specific-class"> <mat-expansion-panel-header> <a mat-button>Lorem ipsum dolor sit amet.</a> </mat-expansion-panel-header> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> </ul> </mat-expansion-panel> </mat-accordion> CSS /deep/ .mat-expansion-indicator::after, .mat-expansion-panel-header-description { color: red;} 您只需将其添加到全局 styles.css 文件中即可。至少在 7.2 版本中对我有用。 .mat-expansion-indicator::after { color: green; } 对于“@角度/材料”：“^10.2.7” 您将 encapsulation: ViewEncapsulation.None 属性添加到您的 @Component 装饰器中 @Component({ selector: '...', templateUrl: '...', styleUrls: ['...'], encapsulation: ViewEncapsulation.None // <---- }) 然后 .mat-expansion-panel-body { padding: 0 !important; } 那么这个 CSS 无论有没有 !important 都可以正常工作 ::ng-deep 和 /deep/ 不适用于新版本的 angular/material 这对我有用 ::ng-deep .mat-expansion-indicator, .mat-expansion-indicator:after { color: green;} 这对我有用 2018 html 文件 <md-expansion-panel> <md-expansion-panel-header class="specific-class"> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> 样式.css .specific-class > .mat-expansion-indicator, .mat-expansion-indicator:after { color: red !important; } 如果您使用 npm 安装了 Angular Material，则可以直接转到应用程序中的material.scss，并使用 class .mat-expansion-indicator:after 更改箭头的颜色。 对我来说这就是有效的： .mat-expansion-indicator::after{ border-color: red; }

直接使用mat-datepicker，无需输入

我想将日期选择器放在永久侧边栏中，始终可见并且不依赖于输入，这可能吗？ 我想只要放置组件并添加opened = true就可以留下

角度材质样式类不起作用

我正在使用 Angular Material 将日期选择器添加到我的应用程序中。由于某种原因，角度材料没有应用原始的角度材料样式。 它在我的应用程序中的显示方式： 它应该如何显示...

操纵角度材料输入表单样式

我是 Angular 和 Angular Material (AM) 的新手。默认情况下，AM 输入组件显示调色板的主要颜色，直到您单击表单，然后它会更改占位符值并...

文本溢出：mat-expansion-panel 标题中的省略号

使用垫扩展面板来显示可以折叠的文本。唯一缺少的是 css text-overflow: ellipsis 样式应提供的 3 个点。然而这并不...

Angular Material Mat-根据最长选项宽度选择宽度

我有一个带有选项的垫选择，我希望将其内联设置为文本，并且下拉列表的长度与最长的选项一样长。我可能可以用 js / css vanilla 风格做一些黑客行为，但是