Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
<select id="chefId" formControlName="chefId" class="form-control" placeholder="d.ff"> <option value="" selected disabled>Sélectionner un Chef</option> <option *ngFor="let buHead of buHeads" [value]="buHead.userId">{{ buHead.name }}</option> </select> 我想给 ChefId 一个占位符 （https://i.sstatic.net/Z9DCN3mS.png） this.addUserForm = this.formBuilder.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', Validators.required], confirmPassword: ['', Validators.required], role: ['', Validators.required], chefId: [''], }); In Angular Material, placeholders for <select> elements are handled differently compared to regular HTML. The placeholder attribute doesn't work directly on <select> elements. Instead, you need to use Angular Material's <mat-select> component, which supports placeholders natively. Here's how you can achieve this using Angular Material's `<mat-select>`: 1.Install Angular Material (if not already installed): ng add @angular/material 2.Import MatSelectModule in your app module: import { MatSelectModule } from '@angular/material/select'; @NgModule({ ... imports: [ ... MatSelectModule, ... ], ... }) export class AppModule { } 3. Update your template to use <mat-form-field> and <mat-select>: <mat-form-field appearance="fill"> <mat-label>Sélectionner un Chef</mat-label> <mat-select id="chefId" formControlName="chefId"> <mat-option value="" disabled>Sélectionner un Chef</mat-option> <mat-option *ngFor="let buHead of buHeads" [value]="buHead.userId">{{ buHead.name }}</mat-option> </mat-select> </mat-form-field> Here, <mat-form-field> is a container for form elements, and <mat-label> serves as a label for the field. The placeholder text "Sélectionner un Chef" is displayed by default when no option is selected. 4.Ensure your form is properly defined in the component: import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent implements OnInit { addUserForm: FormGroup; buHeads = [ { userId: '1', name: 'Chef One' }, { userId: '2', name: 'Chef Two' } // Add more chef objects here ]; constructor(private formBuilder: FormBuilder) {} ngOnInit(): void { this.addUserForm = this.formBuilder.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', Validators.required], confirmPassword: ['', Validators.required], role: ['', Validators.required], chefId: ['', Validators.required] }); } }
警告消息“无法在 Angular 3、Angular Material 和 Angular Material Experimental 中找到 Angular Material 核心主题”
我已成功应用 Material 3 和 Angular Material Experimental 的自定义调色板，但我不断在控制台中收到警告“无法找到 Angular Material 核心主题。大多数 Mat...
我正在使用 Angular Material 的 CDK 在 Angular 应用程序中实现拖放功能。拖放功能按预期工作，但我正在努力识别来源和
Angular 5 Material Snackbar 面板类配置
我正在尝试将 panelClass 配置添加到 Angular Material Snackbar。 我根据官方网站的文档编写了以下代码。 从 '@an...
在 Angular 中，如何将变量声明为 MatSlideToggle 类型
我正在处理一个 Angular 项目。在某个组件中，我的 html 文件中有此内容（代码片段）： 我正在处理一个 Angular 项目。在某个组件中，我的 html 文件中有这个（代码片段）： <mat-slide-toggle #powerswitch 在组件的 ts 文件中，我可以像这样引用这个元素并以编程方式设置它，一切正常（代码片段）： @ViewChild("powerswitch") PowerSwitch: any; this.PowerSwitch._checked = true 目前 PowerSwitch 被定义为 any 类型。我如何将其定义为 MatSlideToggle 类型？ 仅仅这样做是不够的（因为编译器找不到名称 MatSlideToggle）： @ViewChild("powerswitch") PowerSwitch: MatSlideToggle; 将使代码更好地调试，因为人们可以在编码时看到变量的类型。 谢谢。 您可以像下面这样尝试吗，我们可以使用 read 属性来指定我们需要从 ViewChild 导出哪个 @ViewChild("powerswitch", { read: MatSlideToggle }) PowerSwitch: MatSlideToggle; 阅读 用于从查询的元素中读取不同的标记。 read 支持以下值： 任何带有 @Component 或 @Directive 装饰器的类 在与此查询的选择器匹配的组件的注入器上定义的任何提供者 通过字符串令牌定义的任何提供程序（例如 {provide: 'token', useValue: 'val'}） ATemplateRef、ElementRef和ViewContainerRef 由于您引用的是内部私有属性，因此编译器会抛出错误。如果您想以编程方式设置它，请使用 checked 输入属性。” @ViewChild("powerswitch") PowerSwitch: MatSlideToggle; this.PowerSwitch.checked = true
Angular getLocaleFirstDayOfWeek('en-FR') 返回 0（星期日）作为一周的开始日，而对于 en-NL 则返回 1（星期一）
我需要根据区域设置显示一周的开始日期并自定义日期选择器以显示工作日。由于 NativeAdaptor 始终返回星期日作为一周的开始日，因此自定义适配器...
我在我的项目中使用 Angular Material 的拖放功能。虽然拖动效果很好，但我在删除项目时遇到了问题。这些项目可以拖动，但是当我尝试放下它们时......
SideNav 使用 Angular Material 17 无法打开
我目前正在刷新我的 Angular 知识。目前，我有两个组件，主要是标题组件（工具栏）和侧导航组件（SideNavigation）。 我将子组件称为 (sidenav-
我遇到一个问题，当我单击“editTask”按钮时，子任务未显示在表单中。 每个任务可以有多个子任务。当我单击任务进行编辑时，...
我想让图像的大小响应屏幕的大小，但它不起作用。我想在小屏幕上显示整个图像，但它只显示图像的一半。如果有一些...
解决 NullInjectorError：Angular 组件中没有 MatDialogRef 的提供程序
我创建了一个 Angular 组件，允许在不使用对话框的情况下创建任务。但是，我还想在对话框中启用任务创建。 当我加载网站时，我遇到了
为什么它告诉我如果所有html元素都有值，则target的value属性不存在？
我正在做一个与API相关的项目，我正在使用Angular、Angular Material、Typescrit和RXJS，错误是在尝试突出显示搜索栏时，在这段html代码中我收到错误...
Angular Material mat-chip 上的文本颜色
我有一个 mat-chip-set 和几个带有自定义产品芯片类的 mat-chip 对象： 我有一个 mat-chip-set 和几个带有自定义 mat-chip 类的 product-chip 对象： <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-set> 我的CSS是： .product-chip { background-color: pink !important; color: white !important; } 结果是芯片背景颜色是我想要的粉红色，但文字颜色仍然是黑色。 如何将 mat-chip 对象的文本颜色设为白色？ 参见 StackBlitz 示例：https://stackblitz.com/edit/angular-nzhkmg?file=src/app/chips-overview-example.html 我会编辑使用的变量。 style.css .mat-mdc-standard-chip { --mdc-chip-label-text-color: #fff; } 此外，检查其他选项的作用，以在芯片处于其他状态（禁用）时保持样式一致。 .mat-mdc-standard-chip { --mdc-chip-elevated-container-color: #e0e0e0; --mdc-chip-elevated-disabled-container-color: #e0e0e0; --mdc-chip-label-text-color: #fff; --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; } 示例：https://stackblitz.com/edit/angular-nzhkmg-dk3hsm?file=src%2Fstyles.scss 您可以创建一个指令，将文本和背景颜色作为输入，例如如下： chip-theme.directive.ts： import { Directive, ElementRef, Input, OnInit } from '@angular/core'; type ChipTheme = { backgroundColor: string; color: string; }; @Directive({ selector: '[appChipTheme]', }) export class ChipThemeDirective implements OnInit { @Input('appChipTheme') theme: ChipTheme; constructor(private el: ElementRef) {} ngOnInit(): void { const natEl = this.el.nativeElement; const { color, backgroundColor } = this.theme; // Background Color natEl.style.backgroundColor = backgroundColor; // Text Color natEl.style.setProperty('--mdc-chip-label-text-color', color); } } 然后在 HTML 模板中使用如下： <mat-chip *ngFor="let chip of chips" [appChipTheme]="{ color: chip.color, backgroundColor: chip.bgColor }"> <span>{{ chip.text }}</span> </mat-chip> 不要忘记在 app.module.ts 中导入指令。
我正在尝试从 Angular html 页面调用打字稿函数。我想在函数中传递一个参数。该参数将是一个布尔值，表示是否选择 mat-chip。我谷歌了...
单击按钮后，会打开一个 MatDialog 组件，其中包含一些 html 和其他 Angular 材质组件。 我正在使用 mat-elevation-z5 类，对话框如下所示： 我想...
mat-table Angular 中的动态 matHeaderRowDef
我即将动态绑定垫表中的组标题行。但 DOM 找不到 headerId。 HTML： ...
我正在开发一个项目，我需要使用多选下拉菜单实现搜索。当我添加下面的代码时，我可以进行搜索，但我之前选择的值在新搜索后消失了。
我有一个动态选项卡内容，从一个选项卡移动到另一个选项卡时，选项卡内容闪烁。 我有一个动态选项卡内容，从一个选项卡移动到另一个选项卡时，选项卡内容闪烁。 <md-tabs md-dynamic-height class="md-primary"> <md-tab data-ui-sref="common.usermanagement.userclassmaintenance" md-active="$state.includes('common.usermanagement.userclassmaintenance')"> <md-tab-label> User-class Maintenance </md-tab-label> <md-tab-body> <md-content ng-cloak flex layout="column" class="md-padding"> <div data-ui-view="userclassmaintenance"></div> </md-content> </md-tab-body> </md-tab> <md-tab data-ui-sref="common.usermanagement.usermaintenance" md-active="$state.includes('common.usermanagement.usermaintenance')"> <md-tab-label> User Maintenance </md-tab-label> <md-tab-body> <md-content ng-cloak flex layout="column" class="md-padding"> <div data-ui-view="usermaintenance"></div> </md-content> </md-tab-body> </md-tab> </md-tabs> 我还包含了以下 CSS 部分，这是我从另一篇文章中获得的。但不适合我。 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 我也面临着与mat-tab类似的情况。 我使用以下代码： <mat-tab-group dynamicHeight="true"> <mat-tab label="Pivot View"> <ng-template matTabContent> <app-missing-data-pivot [requestBody]="dataSource"></app-missing-data-pivot> </ng-template> </mat-tab> </mat-tab-group> dynamicHeight="true"导致选项卡内的元素闪烁。我删除了它，一切都很好。 确保闪烁不是由仅显示几毫秒的旋转器和覆盖层引起的！ 我通过将 mat-tab-group 的最大宽度从 100% 更改为 99% 来修复我的问题，如下所示：
使用带有展开/折叠行的 mat-table 数据显示树状结构
Angular 新手，希望有人能在这里帮助我。我需要显示 mat-table，其中可能有多行数据可以展开/折叠。这是我想要显示的结构： ...
Angular - 如何从 mat-list-text 中删除 padding-right？
我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： 我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： <mat-selection-list [multiple]="false" [class.selected]="currentItem" formControlName="itemListControl" > <mat-list-option *ngFor="let item of items" [value]="item.id" > <div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; align-items: center"> {{ item.name }} </div> <button mat-icon-button> <mat-icon>edit</mat-icon> </button> </div> </mat-list-option> </mat-selection-list> 当我在浏览器中检查站点时，我可以看到有一个 16px 的填充，它将按钮移动到列表项内的左侧： 我已经尝试通过将其添加到组件的 scss 文件中来删除它： .mat-list-item { padding-right: 0 !important; } 由于某种原因，这没有任何效果。看起来这甚至根本没有应用于该元素。我做错了什么以及如何摆脱这种填充（不会造成任何潜在的不良副作用）？ 请按如下方式使用。会起作用的。 .mat-list-text { padding-right: 0 !important; } 谢谢！ 使用整个选择器（而不是仅仅使用 .mat-list-text，复制上图中突出显示的 css 的所有选择器部分）来删除填充，角度材质很难修改。不要忘记添加 !important 。我以前必须这样做。我希望它也对你有用。 步骤1 在您的 component.ts 文件中添加： encapsulation: ViewEncapsulation.None 步骤2 在你的 css 文件中添加新的类自定义选项： .mat-list-option.mat-list-option.custom-option { .mat-list-text { padding-right: 0px !important; } } 步骤3 在您的 .html 文件中将新类添加到您的 mat-list-option 中： <mat-list-option ... class="custom-option"> （注：这是在 Angular V15 上测试的）