angular-material2 相关问题

Angular Material 覆盖 SnackBar 组件的默认样式

我正在尝试覆盖 Angular Material 中小吃栏组件的默认最大宽度。 Angular Material应用的CSS如下所示： .mat-snack-bar-container { 边界半径：...

禁用 mdInput 文本字段的浮动

在 Angular 4（材质）应用程序中，我有一个用于搜索的文本字段。当我在字段中输入内容时，会出现第二个字段，显示输入的文本。当我滚动页面时，这个新字段会浮动。我该如何禁用...

角度材质选项卡不适用于包装组件

我们正在开发一个企业组件库，该库应提供 Material Design Angular 组件。所以这个库的用户不应该使用例如Angular Material 直接但ra...

树：树更新时如何保持打开状态

当我将新数据设置到 this.dataSource.data 时，我需要保持树节点打开/关闭状态。新数据与旧数据非常相同 - 它只是添加/删除了一个或几个最低级别的节点。 我的想法是...

使用 ScrollStrategy 声明性创建 Overlay

TL，博士；以声明方式创建 CdkConnectedOverlay 时如何使用滚动策略？ 细节; CdkConnectedOverlay 是一个促进以声明方式创建 Overlay 的指令。 它提供了

选择“所有垫子”选项并取消选择“全部”

我有如下场景： 我想要实现的是： 当用户单击“全部”时，将选择所有选项，当用户再次单击“全部”时，将取消选择所有选项。 如果选中所有选项...

Angular Material 和 Jasmine：“没有 InjectionToken MdDialogData 的提供者！”

我有一个用于 Angular Material MdDialog 的组件： @成分（{ ... }) 导出类 MyComponent { 构造函数（@Inject（MAT_DIALOG_DATA）公共数据：任何，公共拨号...

如何在运行时更改 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 的文本属性...