angular-material 相关问题

如何使角材料芯片静态？

我正在尝试做类似的事情：https://material.angularjs.org/1.1.9/demo/chips#static-chips 其中芯片不可选择、可点击或可悬停，只是想要它成为一个静态的ch...

如何自定义 Angular Mat 日期选择器输入字段

我正在尝试在我的 Angular 应用程序中使用一个简单的日期范围选择器。如何设置角度材料日期选择器输入字段的宽度和高度。 我的html- <... 我正在尝试在我的 Angular 应用程序中使用简单的日期范围选择器。如何设置角材料日期选择器输入字段的宽度和高度。 我的html- <div class="no-bottom"> <mat-form-field appearance="outline"> <mat-label>Datumsbereich</mat-label> <mat-date-range-input [formGroup]="range" [rangePicker]="picker"> <input matStartDate formControlName="start" placeholder="Startdatum"> <input matEndDate formControlName="end" placeholder="Endtermin"> </mat-date-range-input> <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-date-range-picker #picker></mat-date-range-picker> </mat-form-field> </div> 我的 CSS - .no-bottom { margin-bottom: -1.25em !important; } 我的组件 - import { Component, EventEmitter, Input, Output } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { NativeDateAdapter } from '@angular/material/core'; @Component({ selector: 'date-range-picker', templateUrl: './date-range-picker.component.html', styleUrls: ['./date-range-picker.component.scss'], providers: [NativeDateAdapter], }) export class DateRangePickerComponent { @Output() rangeChange = new EventEmitter<FormGroup<any>>(); range = new FormGroup({ start: new FormControl<Date | null>(null), end: new FormControl<Date | null>(null), }); constructor() { this.range.valueChanges.subscribe(value => { this.rangeChange.emit(this.range); }); } } 您无法设置 mat-form-field 宿主元素的宽度和高度。 组件样式封装在组件的宿主元素中，这样它们就不会影响组件的其余部分。 Angular 提供了 ViewEncapsulation.None : 将组件的样式添加到文档中， 使它们在整个应用程序中可用，因此完全 全局并影响文档中的任何匹配元素。 您需要进行以下更改来设置宽度或高度： @Component({ selector: 'date-range-picker', templateUrl: './date-range-picker.component.html', styleUrls: ['./date-range-picker.component.scss'], encapsulation: ViewEncapsulation.None, providers: [NativeDateAdapter], }) .... //日期范围-picker.component.scss 样式范围仅限于组件： date-range-picker { .mat-mdc-form-field { @apply w-[450px]; // ..... } }

Angular 16 ng构建库失败（ivy完整编译模式）

我的角度应用程序是版本 10。我将其更新到版本 16，现在当我构建本地（角度）库时，它无法给出此错误。 “✖ 使用 Angular 源代码进行编译...

ANIMATION_MODULE_TYPE 出现 Angular 15 ng 服务错误

正如标题所说。我已经为这个错误苦苦挣扎了几个小时。 当我尝试 ng 服务时，大概有 30 个文件打印了这个： ./node_modules/@angular/material/fesm2020/button.mjs:239:156-177 - 错误：导出'

错误：NG 8001 mat-paginator 不是 Angular 16 中的已知元素

我正在尝试将角度/材料添加到角度16项目中 为此，我创建了 app.module.ts 和 mycomponent.module.ts & mycomponent.component.html。 尝试运行“ngserve”给予...

覆盖 Mat-Form-Field 默认样式

我使用 mat-form-field 创建了一个搜索栏并尝试自定义样式。现在，输入和图标周围有一个类似边框的灰色区域。另外，当我单击输入时，会出现边框...

MatSnackBar panelClass 不读取样式类

我想在MatSnackBar panelClass中插入一个scss类。但它不起作用。仅供参考，verticalPosition 和horizontalPosition 工作正常。这是我的 TS： openSnackBar（消息：字符串，操作：...

自定义开箱即用的角度选项卡

我正在尝试自定义 Angular Material 14 中的一些开箱即用样式。到目前为止，我已经能够更改选项卡颜色和背景颜色。但如何更改蓝色活动栏？...

如何验证 Angular Material Datepicker？

我有以下代码： 我有以下代码： <form [formGroup]="meetingFormGroup"> <!-- Date Input --> <mat-form-field> <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date" formControlName="date" required > <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <mat-error *ngIf="meetingFormGroup.controls['date'].hasError('required')" >Please choose a date.</mat-error > <mat-error *ngIf="?????" >Entered date is too small.</mat-error > </mat-form-field> </form> 现在在 Angular Material 网站 的“日期验证”部分，我阅读了以下内容： 每个验证属性都有不同的错误可以检查： A value that violates the min property will have a matDatepickerMin error. A value that violates the max property will have a matDatepickerMax error. A value that violates the matDatepickerFilter property will have a matDatepickerFilter error. 所以我的问题是，如何验证 mat-error 标签中的这些错误。我需要在 *ngIf 表达式字段中写什么？ 我很抱歉我的英语不好，希望你理解我的问题，也许可以提供解决方案。 谢谢！ 来自 Angular Material 网站（此处）： 违反 min 属性的值将会出现 matDatepickerMin 错误。 违反 max 属性的值将会出现 matDatepickerMax 错误。 违反 matDatepickerFilter 属性的值将出现 matDatepickerFilter 错误。 因此，您将使用： 分钟 - meetingFormGroup.controls['date'].hasError('matDatepickerMin') 对于最大 - meetingFormGroup.controls['date'].hasError('matDatepickerMax') 用于过滤器 - meetingFormGroup.controls['date'].hasError('matDatepickerFilter')。 模板： <mat-error *ngFor="let error of getErrorMessages(control)">{{ error }}</mat-error> 使用这种方法，您可以列出 mat-error 实例中的所有错误消息，并将显示错误消息列表。 getErrorMessages(control: AbstractControl): string[] { const errors = {}; if (control?.errors) { const controlErrors = control.errors; if (controlErrors?.matDatepickerMin) { // Any custom logic in case needs to apply errors['matDatepickerMin'] = 'Min Date can't be less than e.g 2024/01/01'; } if (controlErrors?.matDatepickerMax) { // Any custom logic in case needs to apply errors['matDatepickerMax'] = 'Max Date can't be less than e.g 2024/12/31'; } if (controlErrors?.matDatepickerFilter) { // Any custom logic in case needs to apply errors['matDatepickerFilter'] = 'Invalid date'; } } if (Object.keys(errors).length === 0) { return []; } return Object.keys(errors).map(key => { switch (key) { case 'matDatepickerMin': case 'matDatepickerMax': case 'matDatepickerFilter': return errors[key]; default: return ''; } }); }

如何在同一组件上应用多个 MAT_DATE_FORMATS

我有一个包含许多日期输入的组件。除其中一个外，所有这些都将使用标准格式 (MM/DD/YYYY)。我读到这里，这帮助我弄清楚如何获取我想要的自定义格式（MM/YYYY）...

如何通过单击按钮切换垫扩展面板？

有什么方法可以通过单击外部按钮来扩展特定的垫扩展面板吗？ 我尝试过链接到面板的 ID，但没有成功...... 有什么方法可以通过单击外部按钮来扩展特定的垫扩展面板吗？ 我尝试链接到面板的ID，但没有成功...... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="document.getElementById('panel1').toggle()>Click me</button> 这是我的 stackblitz 代码示例 我的最终计划是使用此方法在从数组生成的列表中打开不同的面板：<mat-expansion-panel *ngFor="let d of data"> ... 在您的 html 文件中： <mat-expansion-panel [expanded]="panelOpenState"> <mat-expansion-panel-header> <mat-panel-title> TITLE </mat-panel-title> </mat-expansion-panel-header> <p>BODY</p> </mat-expansion-panel> <button mat-raised-button (click)="togglePanel">TOGGLE</button> 在您的 TS 文件中： panelOpenState: boolean = false; togglePanel() { this.panelOpenState = !this.panelOpenState } 如果使用 *ngFor 生成扩展面板： <mat-expansion-panel [expanded]="isOpen" *ngFor="let d of data"> <mat-expansion-panel-header> {{ d.header }} </mat-expansion-panel-header> <p>{{ d.content }}</p> </mat-expansion-panel> <button mat-raised-button (click)="togglePanel">TOGGLE</button> 如果按下按钮，所有展开的面板都会打开 同时。 要仅用一个按钮打开一个面板，请为每个元素的数据数组添加一个“扩展”属性，如下所示： data = [ {id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false}, {id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false}, {id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false}, {id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false}, ] 然后在您的模板中： <mat-expansion-panel [(ngModel)]="d.expanded" [expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl> <mat-expansion-panel-header> <button (click)="toggle(d.expanded)">TOGGLE</button> {{ d.header }} </mat-expansion-panel-header> <p>{{ d.content }}</p> </mat-expansion-panel> 以及按钮点击引发的方法： toggle(expanded) { expanded = !expanded; } <mat-expansion-panel [disabled]="true" #mep="matExpansionPanel" *ngFor="let foo of list"> <mat-expansion-panel-header> <button (click)="mep.expanded = !mep.expanded">Toggle</button> </mat-expansion-panel-header> <p>Text</p> </mat-expansion-panel> 在 mat-expansion-panel 的 expanded 属性上使用双向绑定。这是 StackBlitz 中的一个示例： https://stackblitz.com/edit/angular-gtsqg8 <button (click)='xpandStatus=xpandStatus?false:true'>Toggle it</button> <p> <mat-expansion-panel [(expanded)]="xpandStatus"> <mat-expansion-panel-header> <mat-panel-title>This an expansion panel</mat-panel-title> <mat-panel-description>xpandStatus is {{xpandStatus}}</mat-panel-description> </mat-expansion-panel-header> Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status. </mat-expansion-panel> </p> 您可以使用方法toggle()。 首先给元素一个id。 <mat-expansion-panel #matExpansionPanel> 接下来，从 javascript 访问该元素。导入必要的库（MatExpansionPanel、ViewChild） @ViewChild(MatExpansionPanel, {static: true}) matExpansionPanelElement: MatExpansionPanel; 最后调用切换函数 this.matExpansionPanelElement.toggle(); //open(), close() <mat-nav-list> <mat-expansion-panel *ngFor="let row of rows" #mep="matExpansionPanel"> <mat-expansion-panel-header> {{row}} </mat-expansion-panel-header> <h2>Test</h2> <button (click)="mep.toggle()">Toggle</button> </mat-expansion-panel> </mat-nav-list> 工作示例： https://stackblitz.com/edit/mat-expansion-panel-vymjsq?file=app%2Fexpansion-overview-example.html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <mat-accordion displayMode="flat" multi class="mat-table"> <section matSort class="mat-elevation-z8 mat-header-row"> <span class="mat-header-cell" mat-sort-header="vesselName"></span> <span class="mat-header-cell" mat-sort-header="vesselName">d</span> </section> <mat-expansion-panel [disabled]="true" #mep="matExpansionPanel" *ngFor="let d of data"> <mat-expansion-panel-header> <span class="mat-cell" (click)="mep.expanded = !mep.expanded"> <mat-icon class="icon" *ngIf="!mep.expanded">expand_more</mat-icon> <mat-icon class="icon" *ngIf="mep.expanded">expand_less</mat-icon> </span> <span (click)="dClicked(d)" class="mat-cell">{{d.dataSet}}</span> </mat-expansion-panel-header> <div><pre>{{d | json}}</pre></div> </mat-expansion-panel> <div class="well" *ngIf="!d || d.length == 0"> <p>There are no d for this.</p> </div> </mat-accordion> html: <mat-accordion > <mat-expansion-panel #first="matExpansionPanel"> <mat-expansion-panel-header> <mat-panel-title>...</mat-panel-title> </mat-expansion-panel-header> ... </mat-expansion-panel> <mat-expansion-panel #second="matExpansionPanel" expanded="true"> <mat-expansion-panel-header> <mat-panel-title>...</mat-panel-title> </mat-expansion-panel-header> ... </mat-expansion-panel> </mat-accordion> <button (click)="doSomething(first, second)">Click</button> ts： import { Component } from '@angular/core'; import { MatExpansionPanel } from '@angular/material'; @Component({ selector: 'app-home', templateUrl: './home.component.html' }) export class HomeComponent { doSomething(first: MatExpansionPanel, second: MatExpansionPanel) { if (first.expanded ) { // check if first panel is expanded first.close(); // close first panel second.open(); // open second panel // ... } } } 了解更多 另一种方法是阻止点击事件传播。 <mat-accordion class="example-headers-align" multi> <mat-expansion-panel> <mat-expansion-panel-header> <div class="my-panel" (click)="$event.stopPropagation();"> <h3>Panel Header</h3> <button mat-stroked-button (click)="myButton()">my button</button> </div> </mat-expansion-panel-header> <div>My panel content!</div> </mat-expansion-panel> </mat-accordion> 参考： 仅在图标上展开面板单击角度材质

自定义通用组件构造函数的注入令牌？

我制作了一个通用材料自动完成功能，我想将其用于不同的 API 数据，例如国家、人物、职位等。这些数据中的每一个都具有共同的属性：id、name。因此，我定义...

我想隐藏 intltelinput 中的搜索字段

我正在使用角度材料，还使用 intltelinput 来获取国家/地区移动代码，因此，材料表单字段内的 intltelinput 无法正常工作，就像我想隐藏搜索栏一样，但它不起作用...

是否有一个带有 Angular 反应形式和 matInput 的简单数字输入？

如何拥有具有反应形式的？ 没有原生的数字验证器（https://angular.io/api/forms/Validators），但你可以轻松地做一个模式 Validators.pa...

如何自定义角度材质组件？

我对编程完全陌生。 我想做一个网站，一位朋友告诉我 Angular 很好，我应该使用 Angular Materials。但我不喜欢组件的外观。我该如何改变...

在反应式表单控件中与 Validators.required 一起使用的自定义控件不显示指示器

假设我们有 2 个输入：MatInput 控件和自定义输入控件。 电话号码 < 假设我们有 2 个输入：MatInput 控件和自定义输入控件。 <div [formGroup]="form"> <mat-form-field> <mat-label>Phone number</mat-label> <example-tel-input formControlName="tel"></example-tel-input> <mat-icon matSuffix>phone</mat-icon> <mat-hint>Include area code</mat-hint> </mat-form-field> <mat-form-field> <mat-label>Mobile number</mat-label> <input type="text" matInput formControlName="mobile" /> </mat-form-field> </div> 如果我们迫切需要这两个组件： form: FormGroup = new FormGroup({ tel: new FormControl(null, [Validators.required]), mobile: new FormControl(null, [Validators.required]), }); 手机显示指示符 (*)，而电话则不显示。在文档中它说： 请注意，必需的属性仍然存在于模板中。 虽然对于验证来说不是必需的，但应该保留它 可访问性目的。 这意味着对于自定义组件，我需要在 HTML 模板中包含 required。 <example-tel-input formControlName="tel" required></example-tel-input> 我想知道为什么会这样。 这是重复的代码。 MatInput如何访问父类中需要的验证器而自定义控件却不能？ 这是Stackblitz。 在对 MatInput 进行一些帮助和调查之后，有人建议我能够通过 ngControl 访问验证器。 在自定义组件类构造函数中已经有： @Optional() @Self() public ngControl: NgControl 那么不需要有默认的 _required 值（未定义）： private _required: boolean | undefined; @Input() get required(): boolean { return ( this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false ); }

如何在滑块标签中放置图标而不是数字。角材料

我有一个标签，它显示数字，但我需要更改为自定义图标。 （https://i.stack.imgur.com/nI80z.png）（h...

即使使用 ControlValueAccessor，可重用/共享的 Angular 材质自动完成也会返回 null

我实现了一个共享/可重用的角度材料自动完成，它使用来自服务器的值作为对象返回。我可以将它集成到其他组件中。但是，如果我使用我的组件： &l...

Angular Material 日期选择器在手动更改并按下选项卡时会更改疯狂的日期

我在这里使用了 Angular 材料日期选择器控件。我的组件有一个奇怪的问题。即当我使用日历控件选择它时就很好。但如果我手动更改日期然后 p...

带动态值过滤器的 mat-select-filter

我无法使用 mat-select-filter 过滤数据： ` 我无法使用 mat-select-filter 过滤数据： `<mat-form-field *ngIf="fundComplexesList"> <mat-select placeholder="Using array of objects"> <mat-select-filter [placeholder]="'Filter'" [displayMember]="'fundComplexName'" [array]="fundComplexesList" (filteredReturn)="filteredList5 =$event"></mat-select-filter> <mat-option *ngFor="let item of filteredList5" [value]="item"> {{item.fundComplexName}} </mat-option> </mat-select> </mat-form-field>` 我从 api 调用中获取 FundComplexesList 值 `ngOnInit(): void { this.agreementService.getFundComplexes(false).subscribe(data => { this.fundComplexesList = data; }, error => { console.log('Error while binding FundComplex dropdown.'); }); ` 这是我的过滤方法： `public filteredList5 = this.fundComplexesList.slice();` 问题是当 public FilteredList5 = this.fundComplexesList.slice(); 时我没有得到 this.fundComplexesList 值；函数被调用，有人可以建议如何在调用filteredList5 = this.fundComplexesList.slice();之前获取fundComplexesList中的值吗？ HTML 文件 <div class="center"> <mat-form-field *ngIf="fundComplexesList"> <mat-select placeholder="Using array of objects"> <mat-select-filter [placeholder]="'Filter'" [displayMember]="'title'" [array]="fundComplexesList" (filteredReturn)="filteredList5 = $event" ></mat-select-filter> <mat-option *ngFor="let item of filteredList5" [value]="item"> {{ item.title }} </mat-option> </mat-select> </mat-form-field> </div> TS 文件 import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { fundComplexesList: any = []; public filteredList5: any; constructor(private http: HttpClient) {} ngOnInit(): void { this.fetchEmployees(); } fetchEmployees() { this.http.get<any>('https://dummyjson.com/products').subscribe( (data) => { debugger; this.fundComplexesList = data.products; this.filteredList5 = this.fundComplexesList.slice(); }, (error) => { console.error('Error fetching employees:', error); } ); } } 注意：确保我已经使用了 json 的虚拟 api，所以你根据使用了你的 api 和 chnage html